jQuery - for 内部 for 循环答案

【问题标题】：jQuery - for inside for loopjQuery - for 内部 for 循环
【发布时间】：2021-02-01 17:37:31
【问题描述】：

我尝试在 jQuery 中创建一个 for 循环。成功了！

for (var i = 1; i <= 40; i++) {
    (function(i) {
        $('.infosegment2-1-'+i).click(function() {
            $(".p_expandable").not('.p_expandable2-1-'+i).slideUp();
            $('.p_expandable2-1-'+i).slideToggle('default');
        });
    })(i);
}

当我点击 infosegment2-1-i 时，它显示了它的可扩展内容等等...... 问题是我需要对 infosegment2_2_i 等做同样的事情......

我想把 for 放在里面...语法似乎没问题，但它根本不起作用...

for (var $b = 1; $b <= 10; $b++) {
    for (var $i = 1; $i <= 40; $i++) {  
        $('.infosegment2-'+$b+'-'+$i).click(function() {
            $(".p_expandable").not('.p_expandable2-'+$b+'-'+$i).slideUp();
            $('.p_expandable2-'+$b+'-'+$i).slideToggle('default');
        });
    }
}

我使用https://jshint.com/ 检查我的代码有什么问题，这是该站点的输出：

在引用外部范围变量的循环中声明的函数可能会导致语义混乱。 ($, $b, $i)

我不知道为什么它在行首也将 $ 视为变量... 所以我想我必须以某种方式围绕变量编辑语法，但我不知道该怎么做

编辑：这是我的 HTML 示例：


<div id="content_submenu2">
    <div class=" submenu2_div1 sd">
        <div class="grid gird-cols-1 lg:grid-cols-3 gap-4">

            <div class=" mx-auto bg-black bg-opacity-10 rounded-b-2xl ">                    
                    <img class="infosegment2-1-1 images" src="images/chess-set">  
                    
                    <h3>Chess Set</h3>
                    
                    <div class="p_expandable2-1-1 p_expandable">
                        <p>
                           You have expanded this section by clicking on image.
                        </p>
                    </div>      
            </div>
        <div class="mx-auto bg-black bg-opacity-10 rounded-b-2xl">

        <img class="infosegment2-1-2 images" src="images/checkers">
        <h3>Checkers</h3>
       
        <div class="p_expandable2-1-2 p_expandable">
        <p>
            This is checkers' expandable text
        </p>
        </div>
    
    </div>                        
</div>

我有一个带有 h3 的照片网格，每个 img 都是 infosegment，单击后展开 p_expandable div 并隐藏其他 p_expandable div ....顺便说一句，我使用的是 tailwind 和 jquery-3.2.1.min.js

【问题讨论】：

为了避免使用多个循环和闭包，您可以在 HTML 中使用通用类并遍历 DOM 以将元素关联在一起。这使得代码更简单、更可扩展且更易于维护。如果您可以展示一个 HTML 结构的示例，我们可以为您提供一个如何做到这一点的示例。
可以共享一个沙盒或你的 html 代码，正如 Rory 所说，你应该避免在性能方面出现循环（创建多个闭包）！
添加了一个 html 示例...
$ 是一个引用 jQuery 的变量。它是一个全局变量。您可以使用顶部的/* globals $ */ 告诉 jshint。不是答案，只是关于 jshint 的提示；-)。
你知道当你链接一个调用时 jQuery 选择了它隐式循环的东西吗？您通常根本不需要使用任何显式的“for”循环。 $('[class^=infosegment2]').click(function() {...}) 将选择具有以 (^=) "infosegment2" 开头的类的每个元素，并将点击处理程序附加到所有元素。

标签： javascript jquery for-loop

【解决方案1】：

如果您只需要扩展与每个图像相邻的段落，并同时收缩所有打开的容器，那么应该这样做：

$('.images').click(function() {
  const slideEl = $(this).siblings('.p_expandable');

  $('.p_expandable').not(slideEl).slideUp();
  slideEl.slideToggle();
});

.p_expandable {overflow: hidden; display: none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="content_submenu2">
  <div class=" submenu2_div1 sd">
    <div class="grid gird-cols-1 lg:grid-cols-3 gap-4">

      <div class=" mx-auto bg-black bg-opacity-10 rounded-b-2xl ">
        <img class="infosegment2-1-1 images" src="https://via.placeholder.com/80">

        <h3>Chess Set</h3>

        <div class="p_expandable2-1-1 p_expandable">
          <p>
            You have expanded this section by clicking on image.
          </p>
        </div>
      </div>

      <div class="mx-auto bg-black bg-opacity-10 rounded-b-2xl">
        <img class="infosegment2-1-2 images" src="https://via.placeholder.com/80">
        <h3>Checkers</h3>

        <div class="p_expandable2-1-2 p_expandable">
          <p>
            This is checkers' expandable text
          </p>
        </div>
      </div>
    </div>
  </div>

jQuery 手风琴的例子就像沙滩上的沙子一样多。我建议你看看一些想法。

【讨论】：