1

所以我一直在想如何以一种有意义的方式来解释这一点，但我会在下面向你展示，因为它更有意义。

我有这段代码可以正常工作，但我想将其缩短为 for each 循环或其他内容。

$('.holder1').on({
    click: function(){
    $('.box1').css({display: 'none'});
    $('.text1').css({display: 'block'});
    }
});

$('.holder2').on({
    click: function(){
    $('.box2').css({display: 'none'});
    $('.text2').css({display: 'block'});
    }
});

$('.holder3').on({
    click: function(){
    $('.box3').css({display: 'none'});
    $('.text3').css({display: 'block'});
    }
});

我有这个高达 40+，显然这段代码是可怕的。

4

6 回答 6

4

您可以重构 HTML 代码以使用通用类和data属性。像这样的东西：

<div class="holder" data-box="box1" data-text="text1"></div>
<div class="holder" data-box="box2" data-text="text2"></div>
<div class="holder" data-box="box3" data-text="text3"></div>

然后，您可以为所有类创建一个单击处理程序：

$('.holder').on({
    click: function(){
        $('.' + $(this).data('box')).css({ display: 'none' });
        $('.' + $(this).data('text')).css({ display: 'block' });
    }
});

这避免了需要丑陋的循环来添加多个处理程序和迭代id属性，这总是变成维护的噩梦。

于 2013-10-09T09:55:19.133 回答
4

holder为了解决这个问题，可以使用 jQueryAttribute Starts With选择器（API 文档）迭代元素：

$.each('[class^="holder"]', function(index, item) {
    $(item).on('click', function() {
        $('.box' + index).css({display: 'none'});
        $('.text' + index).css({display: 'block'});
    });
});

不过，正如 Rory McCrossan 在他的回答中指出的那样，我更喜欢使用一些常见的课程。

于 2013-10-09T09:55:46.703 回答
1 
for (var i = 0; i< 40; i++) {
 $('.holder' + i ).on({
    click: function(){
    $('.box' + i).css({display: 'none'});
    $('.text' + i).css({display: 'block'});
    }
 });
}

或者只是添加一个通用类并使用它。

于 2013-10-09T09:54:10.403 回答
0

假设支架和盒子放在各自的容器中，比如

<div>
    <div class="holder">a</div>
    <div class="holder">b</div>
    <div class="holder">c</div>
    <div class="holder">d</div>
</div>

<div>
    <div class="box">a</div>
    <div class="box">b</div>
    <div class="box">c</div>
    <div class="box">d</div>
</div>

您可以完全摆脱框/文本编号：

    $(".holder").click(function() {
        var n = $(this).index();
        $(".box").eq(n).show();
    });

这样，添加新元素或更改它们的顺序会容易得多。

于 2013-10-09T10:10:22.920 回答
0

试试这个：使用类 .box 和 .text 代替

  var holder = $(".holder1");
  for (var i = 2; i<= 40; i++) {
      holder.add($(".holder"+i));
 }
  $(holder).on(
   'click', function(){
    $('.box').css({display: 'none'});
    $('.text').css({display: 'block'});
   }
  });
于 2013-10-09T09:53:14.030 回答
0

利用：

$("*[class^='holder']").on({
    click: function(){
        var id = $(this).attr("class").replace("holder","");
        $('.box'+id).css({display: 'none'});
        $('.text'+id).css({display: 'block'});
    }
});
于 2013-10-09T10:02:42.813 回答