Как объединить функции и классы?
Ребята, подскажите, можно ли объединить три функции в один скрипт? Они фактически идентичны, выполняют одинаковые функции, но для разных блоков. Если писать еще такие, то получится много строк текста. Подскажите, как сократить код?
// добавление класса во фронт
$(function() {
var b = $('.btn_cls');
b.click(function() {
var cls = $(this).data('cls');
$('.front').toggleClass(cls);
});
});
// добавление класса в блок
$(function() {
var b = $('.bSd_cls');
b.click(function() {
var cls = $(this).data('cls');
$('.bSd').toggleClass(cls);
});
});
// убрать/добавить display
$(function() {
var b = $('.btn_dis_cls');
b.click(function() {
var cls = $(this).data("cls");
$('#display').toggleClass(cls);
});
});
|
Очевидное решаение - простой цикл:
$(function() {
[
{
element: '.btn_cls',
target: '.front'
},{
element: '.bSd_cls',
target: '.bSd'
},{
element: '.btn_dis_cls',
target: '#display'
}
].forEach(function(item){
$(item.element).click(function() {
var cls = $(this).data('cls');
$(item.target).toggleClass(cls);
})
});
});
Но удобнее если таких элементов много - сделать глобальный обработчик и сделать некую связь меж целевыми элементами. Примерно так:
$(function() {
$( "body" ).on( "click", ".toggle-target", function() {
var cls = $(this).data('cls');
var target = $(this).data('target');
$(target).toggleClass(cls);
});
});
Где каждому элементу, реагирующему на клик прописывается дополнительный класс "toggle-target", а также атрибут "data-target" содержащий селектор для цели. |
function func(controller, target) {
$(controller).click(function() {
$(target).toggleClass(
$(this).data('cls')
);
});
};
func('.btn_cls','.front');
func('.bSd_cls','.bSd');
func('.btn_dis_cls','#display');
|
Aetae,
пока всего три функции, но возможно их скоро станет больше, поэтому озадачился... В любом случае, хотя бы кода меньше будет |
Ребята, спасибо. Подойдет.
|
$(function() {
[['.btn_cls','.front'],
['.bSd_cls','.bSd'] ,
['.btn_dis_cls','#display']].forEach(function(item){
$(item[0]).click(function() {
var cls = $(this).data('cls');
$(item[1]).toggleClass(cls);
});
});
});
|
j0hnik, тож самое что и у меня, но не так няшно.)
|
Aetae,
да, не по феншую, но компактней. что означают эти магические цифры? 29375, 35 |
j0hnik,
это где вы их нашли?) |
j0hnik, если разгадаешь - будешь разочарован.)
|
Aetae,
разочарован??? хм... это что то обидное |
Ага, три буквы. :)
(...нет, не те) |
держусь за голову как чувак на аватарке
|
От всех этих обьектов и функций толку никакого, поскольку они видны только в пределах своего блока $(function() {});
А вот обьект jQuery виден везде, потому к нему и надо присоединить новый пользовательский метод. В jQuery это делается так:
$.fn.userMethod = function() {
...
};
Конкретно для этой темы:
$(function() {
$.fn.classToggler = function(target, cls) {
$(this).click(function() {
let clss = cls || $(this).data('cls');
$(target).toggleClass(clss);
});
};
});
$(function() {
$('.btn_cls').classToggler('.front');
});
$(function() {
$('.btn_dis_cls').classToggler('#display', 'blue');
});
Второй аргумент cls опциональный для того, чтобы расширить функциональность нового метода - если понадобится работать с другим классом, а не с тем, что указан в data. |
Согласен. Я уже давно не использую jquery и многое подзабыл. Тем те менее, этот вариант работает, по крайней мере у меня в хроме.
|
Нашел где. Наверняка это код от домофона или дата конца света , хотя я еще не понял, что означают последние 35
|
Нет, это три английских символа, читающиеся как два русских.)
|
| Часовой пояс GMT +3, время: 13:58. |