Question

我有一个CMS，它将更新将工作人员添加到网站。我已将其设置为在相应图像下显示每个成员的模糊信息。我隐藏了所有的blurbs onload，只想在点击后显示它们。

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

我也只想在时间显示一个模糊，当点击一个时，它会关闭另一个人并且只显示正确的模糊。

JS小提琴： 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>

通过这样做，您可以使用如下所示的jQuery选择相应的<p>：

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

查看此Fiddle

Answer 2

检查这可能对您有所帮助 [Link Demo] [1]

[1]: http://jsfiddle.net/S5G8f/10/

显示隐藏模糊而不使用ID或类，因为内容会经常更改

2 个答案: