是否有任何方法或程序可以防止 jQuery 应用除当前类之外的所有相同类？

Posted 2023-02-24

【中文标题】是否有任何方法或程序可以防止 jQuery 应用除当前类之外的所有相同类？

【英文标题】：Is there any method or procedure to prevent jQuery to apply all the same classes except current class?

【发布时间】：2020-02-27 11:28:34

【问题描述】：

我有情况将一些 jQuery 应用到当前类，这不应该应用于具有相同名称的其余类。我想应用 jQuery 代码来应用到第一个“img_click”div 但不应用到下一个“img_click” 请在下面找到示例代码：

    <div>    
      <div class="img_click">
        <img src="image1.jpg" />
      </div>
      <div class="info">
        <h2>Image Heading</h2>
        <div>Posted on..</div>
      </div>
    </div>
    <div>    
      <div class="img_click">
        <img src="image2.jpg" />
      </div>
      <div class="info">
        <h2>Image Heading</h2>
        <div>Posted on..</div>
      </div>
  </div>

【参考方案1】：

编辑：

正如你所说如果你点击第n个img_click类，那么只有第n个信息类应该slideDown。因此走这条路：

$( "div.img_click" ).click(function ()$(this).next().slideDown();$(".info").not($(this).next()).css("display","none"););

.infodisplay:none;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="img_click">
    <img src="image1.jpg" />
  </div>
  <div class="info">
    <h2>Image Heading 1</h2>
    <div>Posted on.. </div>
  </div>
</div>
<div>
  <div class="img_click">
    <img src="image2.jpg" />
  </div>
  <div class="info">
    <h2>Image Heading 2</h2>
    <div>Posted on.. </div>
  </div>
</div>

如果您不想隐藏以前的 info div，那么只需 删除： $(".info").not($(this).next()).css("display","none")

【讨论】：

谢谢Rk003。我有多个 img_click 和 info 类。如果我单击第 n 个 img_click 类，则只有第 n 个信息类应该向下滑动。例如，如果我单击第 6 个 img_click 类，则只有第 6 个 info 类应该向下滑动。

@GopiKrishna 我编辑了我的答案。试试sn-p，希望对你有帮助..

谢谢 Ritesh。您的回答为我提供了另一个解决问题的思路

【参考方案2】：

您可以使用 .find() ：

$('h2').click(function()
        var $this = $(this);
    $this.closest('.main-class').find('.img_click').css( "border-color", "red" );

    );



.img_click
  height:200px;
  width: 200px;
  border: 1px solid black;




<div class="main-class">
  <div class="img_click">
   <img src="image1.jpg" /> 
  </div>
  <div class="info">
    <h2>Image Heading</h2>
    <div>Posted on..</div>
  </div>
</div>
<div class="main-class">
  <div class="img_click">
   <img src="image2.jpg" />
  </div>
  <div class="info">
    <h2 >Image Heading</h2>
    <div>Posted on..</div>
  </div>
</div>

【讨论】：

谢谢阿克希塔。我有多个 img_click 和 info 类。如果我单击第 n 个 img_click 类，则只有第 n 个信息类应该向下滑动。例如，如果我单击第 6 个 img_click 类，则只有第 6 个 info 类应该向下滑动。