Question

我有九种不同的切换和面板，它们按照我想要的方式工作。但是，我怀疑我的jQuery代码可能会短得多吗？

抱歉新手问题，我还在学习。

<script> 
$(document).ready(function(){
    $("#toggle1").click(function(){
        $("#panel1").slideToggle("fast");
    });
    $("#toggle2").click(function(){
        $("#panel2").slideToggle("fast");
    });
    $("#toggle3").click(function(){
        $("#panel3").slideToggle("fast");
    });
    $("#toggle4").click(function(){
        $("#panel4").slideToggle("fast");
    });
    $("#toggle5").click(function(){
        $("#panel5").slideToggle("fast");
    });
    $("#toggle6").click(function(){
        $("#panel6").slideToggle("fast");
    });
    $("#toggle7").click(function(){
        $("#panel7").slideToggle("fast");
    });
    $("#toggle8").click(function(){
        $("#panel8").slideToggle("fast");
    });
    $("#toggle9").click(function(){
        $("#panel9").slideToggle("fast");
    });
});
</script>

编辑：这是基本的HTML结构。我本来应该把它包括在内。我只包括前三个切换，因为我不允许在这里发布很多代码。所有九个div看起来完全一样。

<div class="col">
    <h2 id="toggle1"></h2>
    <ul id="panel1">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<div class="col">
    <h2 id="toggle2"></h2>
    <ul id="panel2">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<div class="col">
    <h2 id="toggle3"></h2>
    <ul id="panel3">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

Answer 1

根据您的代码，您可以使用jQuery starts with attribute selector（[attribute^='value']）和.next()

$("[id^='toggle']").click(function() {
    $(this).next('ul').slideToggle("fast");
});

$(document).ready(function() {
  $("[id^='toggle']").click(function() {
    $(this).next('ul').slideToggle("fast");
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col">
  <h2 id="toggle1">1</h2>
  <ul id="panel1">
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
  </ul>
</div>
<div class="col">
  <h2 id="toggle2">2</h2>
  <ul id="panel2">
    <li>2</li>
    <li>2</li>
    <li>2</li>
    <li>2</li>
  </ul>
</div>
<div class="col">
  <h2 id="toggle3">3</h2>
  <ul id="panel3">
    <li>3</li>
    <li>3</li>
    <li>3</li>
    <li>3</li>
  </ul>
</div>

Answer 2

这将用于选择包含切换的所有id：

$("[id^=toggle]").click(function(){
    $(this).next("[id^=panel]").slideToggle("fast");
});

您可以在jQuery页面中找到有关选择器的更多信息：https://api.jquery.com/category/selectors/

Answer 3

您可以使用：

$(document).ready(function(){
    $('[id^="toggle"]').click(function(e){
        $('#panel'+idIndex($(this))).slideToggle("fast");
    });
});

function idIndex(e){
  return parseInt(e.attr('id').replace(/[^0-9]/gi, ''));
}

<小时/> 使用.next()：

$(document).ready(function(){
    $('[id^="toggle"]').click(function(e){
        $(this).next('[id^="panel"]').slideToggle("fast");
        //you can even use 'ul' instead of '[id^="panel"]'
    });
});

使用.each()：

$(document).ready(function(){
    $('.col').each(function(){
        var col = this;
        $(col).find('h2').click(function(){
          //the same as the previous, you can use '[id^="toggle"]' instead of h2
          $(col).find('ul').slideToggle('fast');
          //and here, '[id^="panel"]'
        });
    });
});

Answer 4

这样的事情怎么样？

var i = 0;

for (i = 0; i < 10; i += 1) {
    $("#toggle" + i.toString()).click(function(){
        $("#panel" + i.toString()).slideToggle("fast");
    });
}

Answer 5

只需使用1-9循环...这是ES6中的单行

＆＃13;

int grafik(void){
   char ett[3][6]={{"   "},{" * "},{"   "}};

   char (*c)[6] = ett;  // c is a pointer to an array of 6 char,
                        // initially pointing to the first element of ett
   printf("%s ", *c);

   // Also:
   printf("%s ", c[0]);
   printf("%s ", c[1]);
   printf("%s ", c[2]);

   // And
   for (int row = 0; row < 3; row++) {
       for (int col = 0; col < 5; col++) {
           printf("%c ", c[row][col]);
       }
       putchar('\n');
   }

   return 0;
}

＆＃13;

更有效的jQuery代码

5 个答案: