添加preventDefault（）和stopPropagation（）

Question

我是一般的編碼新手，尤其是javascript。

我做了翻轉效果。但我注意到當點擊一個.button觸發翻轉效果時，頁面中所有其他相似的div也被觸發。所以，我想補充兩個.preventDefault()和.stopPropagation()翻轉一個div時，至今它的一大失敗

擔任首發，我想出了這個代碼..

$('.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/

我的一個朋友建議我應該在.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/

Answer 2

preventDefault()和stopPropagation()在這裏沒有幫助。您需要使用比所有具有相同類的元素更具體的選擇器。

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

.content{ 
 
\t position: relative; 
 
\t background: #ffffff; 
 
\t width:100%; 
 
\t text-align:center; 
 
\t display: -webkit-box; 
 
\t display: -moz-box; 
 
\t display: box; 
 

 
\t -webkit-box-orient: vertical; 
 
\t -moz-box-orient: vertical; 
 
\t box-orient: vertical; 
 

 
\t -webkit-box-align: center; 
 
\t -moz-box-align: center; 
 
\t box-align: center; 
 
} 
 

 
._hasdata .insidecontent { 
 
\t position: relative; 
 
\t background: #ffffff; 
 
\t margin-bottom:30px; 
 
\t -webkit-perspective: 1000px; 
 
\t -moz-perspective: 1000px; 
 
\t -o-perspective: 1000; 
 
\t perspective: 1000px; 
 
} 
 

 
._hasdata .insidecontent .front { 
 
\t position: relative; 
 
\t z-index: 900; 
 
\t width: 200px; 
 
\t height: 200px; 
 
\t background: #ededed; 
 
\t -webkit-transform: rotateX(0deg) rotateY(0deg); 
 
\t -moz-transform: rotateX(0deg) rotateY(0deg); 
 
\t transform: rotateX(0deg) rotateY(0deg); 
 
} 
 

 
._hasdata .insidecontent .front .fcontent { 
 
\t position:relative; 
 
\t top:30%; 
 
\t } 
 

 
._hasdata .insidecontent.flipped .front { 
 
\t z-index: 900; 
 
\t -webkit-transform: rotateX(0deg) rotateY(180deg); 
 
\t -moz-transform: rotateX(0deg) rotateY(180deg); 
 
\t transform: rotateX(0deg) rotateY(180deg); 
 
} 
 

 
._hasdata .insidecontent .back { 
 
\t position: absolute; 
 
\t width: 200px; 
 
\t height: 200px; 
 
\t top: 0; 
 
\t left: 0; 
 
\t z-index: 800; 
 
\t -webkit-transform: rotateX(0deg) rotateY(-180deg); 
 
\t -moz-transform: rotateY(-180deg); 
 
\t transform: rotateX(0deg) rotateY(-180deg); 
 
} 
 

 
._hasdata .insidecontent.flipped .back { 
 
\t z-index: 1000; 
 
\t background: #E7E7E7; 
 
\t -webkit-transform: rotateX(0deg) rotateY(0deg); 
 
\t -moz-transform: rotateX(0deg) rotateY(0deg); 
 
\t transform: rotateX(0deg) rotateY(0deg); 
 
} 
 

 
._hasdata .insidecontent .front, 
 
._hasdata .insidecontent .back { 
 
\t -webkit-transform-style: preserve-3d; 
 
\t -moz-transform-style: preserve-3d; 
 
\t transform-style: preserve-3d; 
 
\t -webkit-backface-visibility: hidden; 
 
\t -moz-backface-visibility: hidden; 
 
\t backface-visibility: hidden; 
 
\t -webkit-transition: all .8s ease-in-out; 
 
\t -moz-transition: all .8s ease-in-out; 
 
\t transition: all .8s ease-in-out; 
 
} 
 

 
._hasdata .insidecontent .button, 
 
._hasdata .insidecontent.flipped .button-c { 
 
\t z-index: 15; 
 
\t display: block; 
 
\t position: absolute; 
 
\t bottom: 0; 
 
\t margin: -30px 20px 20px; 
 
\t opacity: 0; 
 
\t -webkit-transition: opacity .1s linear; 
 
\t -moz-transition: opacity .1s linear; 
 
\t transition: opacity .1s linear; 
 
} 
 

 
._hasdata .insidecontent:hover .button, 
 
._hasdata .insidecontent.flipped:hover .button-c { 
 
\t opacity: 0.8; 
 
} 
 

 
._hasdata .insidecontent.unflipped .button-c { 
 
\t display: none; 
 
} 
 

 
._hasdata .insidecontent.flipped ._lar { 
 
\t height: 100%; 
 
} 
 

 
._hasdata .insidecontent.unflipped .bcontent { 
 
\t display: none; 
 
} 
 

 
._hasdata .insidecontent.flipped .bcontent { 
 
\t top: 30%; 
 
\t position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
\t <div class="_hasdata"> 
 
\t \t <div class="insidecontent initalized unflipped"> 
 
\t \t \t <div class="front"> 
 
       <span class="fcontent">FRONT CONTENT<br />HERE</span> 
 
\t \t \t \t <a class="btt button">info</a> 
 
\t \t \t </div> 
 
\t \t \t <div class="back _lar"> 
 
\t \t \t \t <div class="bcontent">BACK INFO HERE</div> 
 
\t \t \t \t <a class="btt button-c">go back</a> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
    \t <div class="_hasdata"> 
 
\t \t <div class="insidecontent initalized unflipped"> 
 
\t \t \t <div class="front"> 
 
       <span class="fcontent">FRONT CONTENT<br />HERE</span> 
 
\t \t \t \t <a class="btt button">info</a> 
 
\t \t \t </div> 
 
\t \t \t <div class="back _exif"> 
 
\t \t \t \t <div class="bcontent">BACK INFO HERE</div> 
 
\t \t \t \t <a class="btt button-c">go back</a> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div>

Answer 3

有你瞭解了 「this」 關鍵字嗎？在JQuery點擊處理程序中，$（this）引用處理程序被調用的元素。所以，如果你在$（this）上放置removeClass和addClass方法，它只會影響那個元素。可以遍歷也使用這個...所以你的代碼應該是這樣的：

$('.insidecontent .button').click(function() { 
    $(this).parent().find('.insidecontent').addClass('flipped'); 
    $(this).parent().find('.insidecontent').removeClass('unflipped'); 
}); 

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

你可能甚至不需要find方法在你的情況，但最好是要明確。