Question

我对编程很新（特别是Javascript和jQuery），但我觉得必须有一个简单的解决我的问题：
我正在开发一个类似博客的东西，不同的条目一个接一个地出现。在单击条目时，我想显示一些内容（h2，p），并仅更改此条目的背景。我这样做是通过添加“可读”类，并改变这些元素的不透明度现在，如果我使用：

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

它几乎可以满足我的需求。除了我点击“分隔符”时我只想删除入门级的“可读”。这是我想要完成的事情的一个小提琴（显然它有缺陷）：

http://jsfiddle.net/Lkb2z06v/

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

修改!!!
对不起的人，我没有正确解释。分离器最初是隐藏的。但是，如果您在某个条目上单击任何地方，则会显示内容（包括分隔符）。然后，只有当您点击分隔符时，内容才会再次消失。我希望这清楚。更新了小提琴：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

一种方法是使用jQuery的closest()函数来获得最接近的父匹配。这样，您可以将.seperator放在.entry内的任何位置，而不会破坏代码。

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

这是fiddle。

更新后的问题：

$(function() {
    $(".entry").on('click', function() {
        $(this).addClass('readable');
    });
    $(".seperator").on('click', function(e) {
        $(this).closest('.entry').removeClass('readable');
        e.preventDefault();
        return false;
    });
});

这是fiddle。

Answer 2

如果您希望分隔符始终删除该类而不切换它（您的小提琴看起来像是试图这样做）。请尝试以下方法：

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

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

Answer 3

如果我理解正确，您希望在点击.entry时切换.seperator的课程？

然后您可以使用：

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

由于.entry是.seperator的父元素，我们使用parent()方法选择它，然后切换其类。

另请参阅updated Fiddle。

Answer 4

你可以这样做：

$(function() {
    $(".seperator").click(function() {
        $(this).parent().removeClass('readable');

        //or
         $(this.parent()).attr("class", "");
    });
});

Answer 5

所以如果你想这样做，你需要在你的代码中做一些修改我正在分享一些代码，我认为这会对你有所帮助

   $(function() {
    $(".seperator").click(function() {
 $(".entry").removeClass('readable');       
       $(this).parent().toggleClass('readable');

    });
});

Fiddel演示http://jsfiddle.net/Lkb2z06v/9/

jQuery通过单击另一个div来添加和删除一个类到div

5 个答案:

更新后的问题：