Question

所以我想为相同的类触发一个动作。例如，他们单击一个按钮就会发生动作。有没有更好的方法编写此代码？我有12个事件，是否需要一遍又一遍地为不同的类添加相同的代码，直到ctabtn11和event12back和event12front？

    $('.ctabtn').on('click', function(){
    $('.event1back').show(); //this div will appear
    $('.event1front').remove(); //removes the div

}); 
    $('.ctabtn1').on('click', function(){
    $('.event2back').show();
    $('.event2front').remove(); //removes the div

}); 

$('.ctabtn2').on('click', function(){
    $('.event3back').show();
    $('.event3front').remove(); //removes the div

}); 

$('.ctabtn3').on('click', function(){
    $('.event4back').show();
    $('.event4front').remove(); //removes the div

});

Answer 1

您可以像下面这样写-

$('.ctabtn, .ctabtn1, .ctabtn2, .ctabtn3').on('click', function(){
    var className = $(this).attr('class');
    var num = 1;
    var lastChar = className.slice(-1);
    if(parseInt(lastChar)){
        num += parseInt(lastChar)
    }
    $('.event'+num+'back').show();
    $('.event'+num+'front').remove(); //removes the div

});

Answer 2

那不是“相同的课程”，请尝试这个。

<button data-ctabtn="1"></button>
...
<button data-ctabtn="12"></button>

$('[data-ctabtn]').on('click', function() {
    var idx = $(this).data('ctabtn');
    $('.event' + idx + 'back').show();
    $('.event' + idx + 'front').remove();
});

为多个类编写一个动作的更好方法

2 个答案: