jQuery 通过单击不同的 div 向 div 添加和删除类

Question

我对编程(尤其是 Javascript 和 jQuery)相当陌生，但我觉得必须有一个简单的方法来解决我的问题:
我正在开发一个类似博客的东西，其中有一个又一个出现的不同条目。单击一个条目时，我想显示一些内容(h2，p)，并仅更改该条目的背景。我通过添加“可读”类并更改这些元素的不透明度来做到这一点。
现在，如果我使用:

$(function() {
    $(".entry").click(function() {
        $("this").toggleClass('readable');
    });
});

它几乎满足了我的要求。除了当我单击“分隔符”时我只想删除条目类上的“可读”。这是我想要完成的任务(显然它是有缺陷的):

http://jsfiddle.net/Lkb2z06v/

我正在努力学习这些东西，所以我很感谢您的帮助!

编辑!!!
抱歉，我没有正确解释这一点。分隔符最初是隐藏的。但是，当您单击条目上的任何位置时，内容就会显示(包括分隔符)。然后，只有当您单击分隔符时，内容才会再次消失。我希望这能够清楚地表明这一点。更新 fiddle :http://jsfiddle.net/9zd1fepg/

HTML:

<div class="entry">
    <h1>From Arctic to Atlantic</h1>
    <h2>A cold, rainy stop on a misty island</h2>
    <h3><em>10th</em> of June, 2014 - <em>Reykjavik</em>, Iceland</h3>
     <div class="seperator">
         <img src="Design/Seperator_01.svg">
     </div>
                         <p>Random projections have recently emerged as a powerful method for dimensionality reduction. <a href="#">Theoretical</a> results indicate not much. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis magna eu ultricies laoreet? Pellentesque tempus ornare nisi; quis dictum tortor dapibus id.</p>
</div>
<div class="entry">
    <h1>From Arctic to Atlantic</h1>
    <h2>A cold, rainy stop on a misty island</h2>
    <h3><em>10th</em> of June, 2014 - <em>Reykjavik</em>, Iceland</h3>
     <div class="seperator">
         <img src="Design/Seperator_01.svg">
     </div>
                         <p>Random projections have recently emerged as a powerful method for dimensionality reduction. <a href="#">Theoretical</a> results indicate not much. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis magna eu ultricies laoreet? Pellentesque tempus ornare nisi; quis dictum tortor dapibus id.</p>
</div>

CSS:

.entry {
    background: grey;
}
.entry.readable {
    background: #c6c6c6;
}
.seperator {
    height: 20px;
    width: 150px;
    background-color: red;
}

.entry p {
    opacity: 0;
}

.entry.readable p {
    opacity: 1;
}
.entry h2 {
    opacity: 0;
}
.entry.readable h2 {
    opacity: 1;
}

JS:

$(function() {
    $(".entry").click(function() {
        $(this).addClass('readable');
    });
});

$(function() {
    $(".seperator").click(function() {
        $(".entry").removeClass('readable');
    });
});

Answer 1

如果您希望分隔符始终删除该类而不是切换它(您的 fiddle 看起来正在尝试这样做)。请尝试以下操作:

$(".seperator").click(function() {
    $(this).closest(".entry").removeClass('readable');
    return false;
});

返回 false 可防止事件冒泡并触发其他 $(".entry").click 事件。