Question

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

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

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

JS小提琴：http://jsfiddle.net/zangief007/S5G8f/

CSS：

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

HTML：

<div class="people">

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

    <p class="john">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 class="peter">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 class="sally">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" id="betty">
        <img src="http://placehold.it/150x150" />
            <h2>Betty Boo</h2>
    </div>
    <div class="person" id="sam">
        <img src="http://placehold.it/150x150" />
        <h2>Sm Hunt</h2>
    </div>
    <div class="person" id="paula">
       <img src="http://placehold.it/150x150" />
        <h2>Paula Walls</h2>
    </div>

    <p class="betty">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 class="sam">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 class="paula">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>

JS：

$( "#john img" ).click(function() {
  $( "p.john" ).fadeToggle( "fast", "linear" );
});
$( "#peter img" ).click(function() {
  $( "p.peter" ).fadeToggle( "fast", "linear" );
});
$( "#sally img" ).click(function() {
  $( "p.sally" ).fadeToggle( "fast", "linear" );
});
$( "#betty img" ).click(function() {
  $( "p.betty" ).fadeToggle( "fast", "linear" );
});
$( "#sam img" ).click(function() {
  $( "p.sam" ).fadeToggle( "fast", "linear" );
});
$( "#paula img" ).click(function() {
  $( "p.paula" ).fadeToggle( "fast", "linear" );
});

Answer 1

你可以像下面这样做

$("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
});

Updated Demo

注意：正如Jrn在评论中指出的那样，$("p").hide()会隐藏页面中的所有p标记，因为选择器非常通用。相反，我们可以使用更具体的选择器来隐藏必要的p标记（例如说$(".person ~ p").hide();）。这样，系统只会隐藏p前面带有class='person'且具有相同父级的元素的标记。

Answer 2

您可以在没有ID和类的情况下执行此操作，但它要求div.person和.people p的顺序保持一致;即。如果John的图片是div.person img集合中的第一张图片，那么他的描述必须是.people p集合中的第一张。

请参阅已更新小提琴：http://jsfiddle.net/michasko/sPLDh/3/

<强> 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');
    });
});

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

此外，如果任何人的描述包含多个p标记（如果是这样，您需要使用某种包装，然后fadeIn / {{ 1}}那些包装而不是fadeOut元素。

Answer 3

怎么样：

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

这是您更新的fiddle

编辑 - 抱歉没有看到您一次只想要一个（已修复）。

显示/隐藏div取决于单击的img而不对ID进行硬编码

3 个答案: