Question

我有30个按钮，范围从#p3-btn到#p30-btn，点击后.p3 div一直到.p30 div会产生不同的效果。如何合并此代码，以便我不必将代码复制并粘贴30次以下并更改ID和类？

  $('#p3-btn').click(function () {
    $('.p3').fadeIn().delay(2000).fadeOut();
  });

干杯。

Answer 1

这是编程中DRY（不要重复自己）概念的一个很好的演示。解决它的方法之一是使用ID参数创建一个函数，您将使用该参数来引用元素的id和其他元素的类，例如：

function attachClick(id){
  $('#' + id + '-btn').click(function () {
     $('.' + id).fadeIn().delay(2000).fadeOut();
  });
}

然后只需调用函数（例如，来自for循环）：

attachClick('p30');

虽然上面的示例与您现有代码的一对一匹配，但更好的方法是找到每个按钮与其影响的元素之间的关系，这样您就可以避免附加单独监听每个按钮，而是将一个监听器附加到父元素，让事件处理函数处理其余部分。但是，如果没有看到您的标记，我无法告诉您是否可以在不重写的情况下执行此操作。例如，如果你有这样的标记，这将是微不足道的：

<div class="container">
  <button>Button</button>
  <div>Div to be affected</div>
</div>

Answer 2

Shomz的anwser更简单，你可以使用jquery选择器：

$('button[id^="p"][id$="-btn"]').on("click", function() { 
    var id = $(this).attr("id").replace("-btn", "").replace("p", "");
    $('.p' + id).fadeIn().delay(2000).fadeOut();
});

$('button[id^="p"][id$="-btn"]')允许您选择button以'p'开头并以'-btn'结尾的元素类型id。

Answer 3

您可以使用属性选择器来实现此目的。

<div class="dropdown">
    <button class="btn dropdown-toggle" type="button" data-toggle="dropdown" style="width:100%">MONTHS
    <span class="caret"></span></button>
    <ul class="dropdown-menu" style="color: black;text-align: center;">
        <li ng-model="vm.calendarView" uib-btn-radio="'month'" ng-click="vm.cellIsOpen = false">Month</li>
        <li ng-model="vm.calendarView" uib-btn-radio="'week'" ng-click="vm.cellIsOpen = false">Week</li>
        <li ng-model="vm.calendarView" uib-btn-radio="'day'" ng-click="vm.cellIsOpen = false">Day</li>
    </ul>
</div>

function createDivs(len) {
  var $div = $('<div>');
  for (var i = 0; i < len; i++) {
    var prefix = 'p' + i;
    var $inner = $('<div>');
    $inner.attr('id', prefix + '-btn')
    var $p = $('<p>');
    $p.text(i).addClass(prefix);
    $inner.append($p);
    $div.append($inner);
  }
  return $div;
}
$(function() {
  $('.content').append(createDivs(30));

  $('[id^="p"][id$="-btn"]').on('click', function() {
    $(this).find('[class^=p]').fadeOut().delay(2000).fadeIn();
  });
})

[id$="-btn"] {
  width: 100%;
  border: 1px solid gray;
}

整合jQuery代码

3 个答案: