单击时如何仅选择1个元素?

时间:2014-05-12 05:42:59

标签: jquery

假设我想点击第3个div并显示段落而不与其他div进行交互,但仅显示第3个div然后我点击第4个而没有它与其他任何东西进行交互我将如何做到这一点因为现在它与所有的div进行交互,并且只是说有这样的无限div。我只想让点击与自己/点击的div进行交互。 jQuery只是请。

#coolid p {
     display: none;
}

<div class="coolid"><p>hello</p></div>
<div class="coolid"><p>hello2</p></div>
<div class="coolid"><p>hello3</p></div>
<div class="coolid"><p>hello4</p></div>
<div class="coolid"><p>hello5</p></div>

$("#coolid").append("<div id='showpara'><a href=''>show paragraph</a></div>");
$("#showpara a").on("click", function (e) {
     $("#coolid").find("p").fadeIn();
     e.preventDefault();
     $("#showpara").hide();
})

1 个答案:

答案 0 :(得分:3)

三部分:

  • 作为id必须是唯一的,请使用此处的课程
  • 在事件处理程序中使用this来定位单击的元素
  • 使用closest获取嵌入.coolclass元素,然后找到要显示的元素

这是怎么回事:

.coolclass p {
     display: none;
}

<div class="coolclass"><p>hello</p></div>
<div class="coolclass"><p>hello2</p></div>
<div class="coolclass"><p>hello3</p></div>
<div class="coolclass"><p>hello4</p></div>
<div class="coolclass"><p>hello5</p></div>

$(".coolclass").append("<div class='showpara'><a href=''>show paragraph</a></div>");
$(".showpara a").on("click", function (e) {
     $("p").hide();
     $(this).closest('.coolclass').find("p").fadeIn();
     e.preventDefault();
})

作为补充说明:您可能不需要a元素。 div(.showpara)也是可点击的,您可以将其样式设置为cursor:pointer。这也可以让您删除e.preventDefault()行。毕竟,你在这里没有链接......