Как объединить функции и классы?
Ребята, подскажите, можно ли объединить три функции в один скрипт? Они фактически идентичны, выполняют одинаковые функции, но для разных блоков. Если писать еще такие, то получится много строк текста. Подскажите, как сократить код?
// добавление класса во фронт
$(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, если разгадаешь - будешь разочарован.)
|
| Часовой пояс GMT +3, время: 16:00. |