javascript - 添加 preventDefault() 和 stopPropagation()

Question

总的来说，我是编码方面的新手，尤其是 javascript。

我做了一个翻转的div效果。但是我注意到当点击一个.button触发翻转效果时，页面中所有其他类似的div也会被触发。所以我试图在翻转 div 时同时添加 .preventDefault() 和 .stopPropagation()，到目前为止它是一个很大的FAIL/p>

作为初学者，我想出了这段代码..

$('.insidecontent .button').click(function () {
    $('.insidecontent').addClass('flipped');
    $('.insidecontent').removeClass('unflipped');
});
$('.insidecontent .button-c').click(function () {
    $('.insidecontent').removeClass('flipped');
    $('.insidecontent').addClass('unflipped');
});

此处演示:http://jsfiddle.net/uriri/ke7kqvvk/3/

我的一个 friend 建议我应该在 .click() 函数内的当前目标上使用 .parents()。但是在阅读了 jQuery 文档之后，我完全迷失了!

Answer 1

您不需要停止点击事件或防止默认。你只需要翻转正确的元素。不是你在所有 .insidecontent 中添加/删除类，而你只需要选择被点击按钮的父元素:

$('.insidecontent .button').click(function () {
    $(this).closest('.insidecontent').addClass('flipped').removeClass('unflipped');
});
$('.insidecontent .button-c').click(function () {
    $(this).closest('.insidecontent').removeClass('flipped').addClass('unflipped');
});

演示: http://jsfiddle.net/ke7kqvvk/5/

或者更短的优化版本可以是:

$('.insidecontent').find('.button, .button-c').click(function () {
    $(this).closest('.insidecontent').toggleClass('flipped unflipped');
});

演示: http://jsfiddle.net/ke7kqvvk/6/