时间戳

首页 > 解决方案 > jQuery - for 内部 for 循环

javascript - jQuery - for 内部 for 循环

问题描述

我试图在 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 inside 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

标签： javascriptjqueryfor-loop

解决方案

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

$('.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 手风琴的例子就像沙滩上的沙子一样多。我建议你看看一些想法。

推荐阅读