Javascript 根据单击的img显示/隐藏div，而不硬编码ID'；s

我有一个CMS，将更新添加到一个网站的工作人员。我已经将其设置为在相应的图像下显示每个成员的简介。我已经隐藏了所有的在线广告，只想点击一次就显示出来

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

我也只想一次显示一个简介，当点击其中一个时，它会关闭另一个人，只显示正确的一个

JS小提琴在这里：

CSS:

HTML:

那么：

$(".person").on("click", function(e) { 
    var id = $(this).attr("id");
    $("people.p").hide();
    $("." + id).fadeToggle("fast", "linear");
});

这是您的最新信息

---

编辑-抱歉，没有读到您一次只想要一个（固定）。

您可以像下面这样做

$("div.person img").click(function () {
    var id = $(this).closest('div').attr('id'); //get the id of the parent div
    //var id = $(this).parent().attr('id'); //This can also be used instead of above.    
    $(".person ~ p:visible").hide(); // hides visible p tags before showing the required one.
    $("p." + id).fadeToggle("fast", "linear"); //show the p tag with the required class
});

---

注意：正如Jrn在评论中指出的那样，

$（“p”）.hide（）

将隐藏页面中的所有

p

标记，因为选择器非常通用。相反，我们可以使用更具体的选择器只隐藏必要的

p

标记（比如说

$（“.person~p”）.hide（）；

）。这将仅隐藏前面带有

class='person'

元素且具有相同父元素的

p

标记。

您可以在没有ID和类的情况下执行此操作，但它需要

div.person

和

的顺序保持一致；也就是说，如果约翰的照片是
div.person img
集合中的第一张，那么他的描述必须是
.people p
集合中的第一张

请参见更新的小提琴：

jQuery:

$('.person img').click(function() {
    var index = $('.person img').index(this);
    $('.people p:visible')
        .fadeOut('fast','linear')
        .promise()
        .done(function() {
            $('.people p:eq('+index+')')
                .fadeIn('fast','linear');
    });
});

<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>

HTML:

$('.person img').click(function() {
    var index = $('.person img').index(this);
    $('.people p:visible')
        .fadeOut('fast','linear')
        .promise()
        .done(function() {
            $('.people p:eq('+index+')')
                .fadeIn('fast','linear');
    });
});

<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>


无名氏
彼得潘
萨利山
约翰·多伊是一位杰出的献身者。发酵液中的葡萄素分子。两人分别是孕妇、新生儿、母亲

彼得·潘是一位杰出的政治家。发酵液中的葡萄素分子。两人分别是孕妇、新生儿、母亲

莎莉·希尔斯是一位杰出的青年。发酵液中的葡萄素分子。两人分别是孕妇、新生儿、母亲

贝蒂布
Sm亨特
保拉·沃尔斯
贝蒂·琼斯·多伊（Betty Jones Doe）是一位杰出的献身者。发酵液中的葡萄素分子。两人分别是孕妇、新生儿、母亲

山姆·亨特是一位杰出的献身者。发酵液中的葡萄素分子。两人分别是孕妇、新生儿、母亲

Paula Walls是Lorem ipsum dolor sit amet，一位杰出的献身者。发酵液中的葡萄素分子。两人分别是孕妇、新生儿、母亲


此外，如果对任何人的描述包含多个
p
标记，则这将不起作用（如果是这样，你需要使用某种包装，然后使用
fadeIn
/
fadeOut
这些包装，而不是
p
元素。
你的fiddle链接是错误的。修复了，试着关闭，没有类和ID可以吗？恐怕没有更新的fiddle@Steve（对于这种html结构，不是你的情况）@Steve:我想你仍然需要ID，因为每个div都有不同的内容。这将隐藏页面上的每个
标记，我猜他的小提琴中会有更多标记。你应该使用
.active
类。然后执行类似
$（'p.active'）.hide（）的操作
在您切换正确的代码之前。@Jrn:完全同意，伙计。我应该在示例中指出这一点。我只是想证明这是可以做到的。我知道您的代码更多的是一个“概念”，而不是实际的“生产”代码，我只是为不知道的人指出了它。：）@Jrn：再次重申，完全同意，伙计。我已经更新了一个更具体的版本：）+1。不错的选择伙伴：）顺便说一句，别忘了在你的答案中添加代码。我改进了我的小提琴，现在它等待淡出先完成。谢谢@Harry，我马上就添加；）
<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>