Question

我有一个新闻页面（为了长度）使用显示/隐藏脚本作为长内容。事情是脚本全局应用于所有内容，我希望它只应用于一个元素或最近的元素。

脚本：

$(document).ready(function(){ 

   $(".btn1").click(function(){
      $("p.esl").hide();
   }); 

   $(".btn2").click(function(){
      $("p.esl").show();

   });
});

网站：http://thc-racing.com/

P.S。我是jQuery的新手，所以我的技能非常有限。

Answer 1

以下代码将解决您的问题。

$(document).ready(function(){ 

   $(".btn1").click(function(){
      $(this).parents(".news-item").find(".esl").hide();
   }); 

   $(".btn2").click(function(){
      $(this).parents(".news-item").find("p.esl").show();
   });
});

此代码不会隐藏所有只隐藏属于新闻项的p标签欢呼声

Answer 2

使用id而不是class

＆＃13;

$(document).ready(function(){ 

   $("#btn1").click(function(){
      $("p#esl1").hide();
   }); 

   $("#btn2").click(function(){
      $("p#esl1").show();

   });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id = "esl1">Here is my paragraph!!!! Hi I can hide</p>
<p id = "esl2">Here is my paragraph!!!! Hi I won`t hide</p>
<button id = "btn1">hide</button>
<button id = "btn2">show</button>

＆＃13;

可能是这个答案here，会帮助您了解更多。

Answer 3

正如@naveen所说，上述是处理这种情况的最佳方式

$(document).ready(function(){ 

   $(".btn1").click(function(){
      $(this).parents(".news-item").find(".esl").hide();
   }); 

   $(".btn2").click(function(){
      $(this).parents(".news-item").find("p.esl").show();
   });
});

在这个逻辑中遍历它并找到自己的孩子将解决事件点击问题。

仅显示/隐藏一个元素的脚本，而不是全局

3 个答案: