javascript - 在不使用 ID 或类的情况下显示隐藏广告，因为内容会经常更改

Question

我有一个 CMS，它将更新添加工作人员到站点。我已将其设置为在相应图像下显示有关每个成员的简介。我已经隐藏了所有加载的广告，只希望它们在单击后显示。

是否可以删除唯一 ID，因为工作人员将通过 CMS 添加，并且会一直更改。

我也只想一次显示一个简介，点击其中一个就会关闭另一个，只显示正确的。

JS fiddle 在这里: http://jsfiddle.net/zangief007/S5G8f/5

CSS:

.people{
width:500px;
}
.person{
width:33%;
margin:0 auto;
float:left;
}
.people p{
display:none;
}

HTML:

<div class="people">

    <div class="person">
        <img src="http://placehold.it/150x150" />
            <h2>John doe</h2>
    </div>
    <div class="person">
        <img src="http://placehold.it/150x150" />
        <h2>Peter Pan</h2>
    </div>
    <div class="person">
       <img src="http://placehold.it/150x150" />
        <h2>Sally Hills</h2>
    </div>

    <p>John Doe is Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin molestie ipsum ut fermentum. Duis adipiscing purus gravida, elementum neque nec, mollis tortor.</p>

    <p>Peter Pan is Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin molestie ipsum ut fermentum. Duis adipiscing purus gravida, elementum neque nec, mollis tortor.</p>

    <p>Sally Hills is Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin molestie ipsum ut fermentum. Duis adipiscing purus gravida, elementum neque nec, mollis tortor.</p>

    <div class="person">
        <img src="http://placehold.it/150x150" />
            <h2>Betty Boo</h2>
    </div>
    <div class="person">
        <img src="http://placehold.it/150x150" />
        <h2>Sm Hunt</h2>
    </div>
    <div class="person">
       <img src="http://placehold.it/150x150" />
        <h2>Paula Walls</h2>
    </div>

    <p>Betty Jones Doe is Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin molestie ipsum ut fermentum. Duis adipiscing purus gravida, elementum neque nec, mollis tortor.</p>

    <p>Sam Hunt is Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin molestie ipsum ut fermentum. Duis adipiscing purus gravida, elementum neque nec, mollis tortor.</p>

    <p>Paula Walls is Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin molestie ipsum ut fermentum. Duis adipiscing purus gravida, elementum neque nec, mollis tortor.</p>

</div>

Answer 1

是的，你可以，但是你需要正确地重新构建你的 HTML 标签，以便更容易地选择 jQuery.. 也许你可以把一个人的解释放在它的 div 旁边，如下所示:

  <div class="person" >
        <img src="http://placehold.it/150x150" />
            <h2>John doe</h2>

    </div>
    <p>John Doe is Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin molestie ipsum ut fermentum. Duis adipiscing purus gravida, elementum neque nec, mollis tortor.</p>

这样做你可以选择相应的<p> , 像下面这样使用 jQuery:

$(".person").on("click", function(e) { 
    $(".person").each(function(){
        $(this).next("p").fadeOut();
    });
    $(this).next("p").fadeIn();
});

看看这个 Fiddle