我如何才能激活和关联 slideToggle 函数（使用 JavaScript）仅为我试图在 foreach 循环中显示的一部分？

Posted 2023-02-25

【中文标题】我如何才能激活和关联 slideToggle 函数（使用 JavaScript）仅为我试图在 foreach 循环中显示的一部分？

【英文标题】：How can i activate and associate slideToggle function (with JavaScriot) only for the one part i'm trying to show in a foreach loop?

【发布时间】：2020-06-05 16:59:11

【问题描述】：

每当我单击相关信息时，我都想显示产品的描述，但每次单击随机信息时，我的代码都会显示所有产品的所有描述。请帮帮我。

      <script type="text/javascript">
            $(function () 
                  $("p.info").on('click', function () 
                  $("p.desc").slideToggle();
                );
          );
      </script>




     // the info and desc of the products are cointaned in:


     <div class="products_container">
            <ul>
                @foreach ($products as $product)
                    <li>
                        <div class="products">
                            @include('helpers/productImg', ['attrs' => 'imagefrm', 'imgFile' => 
      $product->image])
                            <p id="product_name"><strong> $product->name </strong></p>
                            <p> $product->descShort </p>
                            @include('helpers/productPrice')
                            <p class="info">Info prodotto</p>
                            <p style="display:none" class="desc">Descrizione: !! $product->  
      `                     descLong !!</p>
                        </div>
                    </li>
                @endforeach
            </ul>
            </div>

【问题讨论】：

嘿 Lucio，欢迎来到 ***。我建议你改用 .next()

感谢 Avi，我尝试了类似 $("p.info").next().slideToggle();但它返回相同的结果（所有产品的所有描述）。

尝试使用这个 $(this).next().slideToggle();

让我知道这是否有效。我会把它作为答案发布

是的，它有效！非常非常感谢！

【参考方案1】：

那是因为您使用的是 .desc 类，这就是它使用该类切换所有元素的原因。但是可以从您的代码中推断出 .desc 在 .info onclick 事件旁边 所以而不是

  $("p.info").on('click', function () 
              $("p.desc").slideToggle();
            );

你应该使用

  $("p.info").on('click', function () 
              $(this).next().slideToggle(); //element next to clicked p.info
            );