假设我想点击第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();
})
答案 0 :(得分:3)
三部分:
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()
行。毕竟,你在这里没有链接......