Question

我正在制作一个计数按钮，但问题是因为我重复相同的代码至少是制作代码巨人的100倍，是否有一种方法不为不同的按钮重复一百次？ / p>

$('#rcleric21').click( function() {
    counter11 = $('#rankcleric11').val();
    if (counter11 > 0) {
       counter11--;
       total[3]++;
       totalranktres--;
       $('#rankcleric11').val(counter11);
       $('.skillpoints3').val(total[3]);
    }
});
$('#rcleric22').click( function() {
     counter11 = $('#rankcleric11').val();
     if (counter11 < 5 && totalranktres <15){
         counter11++ ;
         total[3]--;
         totalranktres++;
         $('#rankcleric11').val(counter11);
         $('.skillpoints3').val(total[3]);
    }                   
});

Answer 1

你可以创建一个函数，例如

function doSomething(e) {
    console.log('Do Something');
}

$('#someId').click(doSomething);
$('#someId2').click(doSomething);

这样您就不需要重复单击回调（doSomething函数）中执行的代码。显然你应该调整内部代码以便更通用，因此它可以根据情况做任何你需要的事情（选择器可以改变很难等）。

如果你需要对很多元素执行这个操作，应该考虑为它添加一个类（不需要遍历所有元素来附加回调）。

你的代码应该是......

function doSomething(e) {
   var elem = $(e.currentTarget);
   console.log(elem);

   //Apply your logic here based on the element here.
}
$('.clickToDoSomething').click(doSomething);

Answer 2

您需要创建一个命名函数，并且还需要传入确定结果的参数。像这样：

function updateThings(arg1, arg2, arg3) {

    var firstComparison = eval(arg1);
    var secondComparison = eval(arg2);

    counter11 = $('#rankcleric11').val();

    if (firstComparison && secondComparison) {
        arg3 ? counter++ : counter11--;
        total[3]++;
        arg3 ? totalranktres++ : totalranktres--;
        $('#rankcleric11').val(counter11);
        $('.skillpoints3').val(total[3]);
    }
}

$('#rcleric21').click( function() {
    updateThings('counter11 > 0', true, true);
});

$('#rcleric22').click( function() {
    updateThings('counter11 < 5', 'totalranktres < 15', false);
});

请注意，我对eval()方法没有经验，可能需要进行调整才能正确处理参数。

正如其他人所说，一个普通的类比定位ID更好。您可以在数据属性中包含比较字符串。这看起来像这样：

<div class="myClickyClass" data-arg1="counter11 > 0" ...> ... </div>

$('.myClickyClass').click( function() {
    var arg1 = $(this).attr('data-arg1');
    var arg2 = $(this).attr('data-arg2');
    var arg3 = $(this).attr('data-arg3');

    updateThings(arg1, arg2, arg3);
});

有没有办法不重复这段代码？

2 个答案: