$(this)、parent()、siblings()、find()、find()與siblings()差異
只針對目前點擊的元素做動作(可重複點擊);操作本身元素
點擊子元素後父元素也有其它效果產生
<ul>
<li>
<input type="button" class="addcart" value="加入購物車">商品一
</li>
<li>
<input type="button" class="addcart" value="加入購物車">商品二
</li>
</ul>
$(document).ready(function() {
$('.addcart').click(function(event) {
//.addcart啟用active
$(this).toggleClass('active');
//li啟用active
$(this).parent().toggleClass('active');
});
});
找自己以外的同層元素
$(document).ready(function() {
$('選擇器1').click(function(event) {
$(this).addClass('active').siblings().removeClass('active');
});
});
<ul class="menu">
<li>
<a href="#">選單1</a>
</li>
<li>
<a href="#">選單2</a>
</li>
<li>
<a href="#">選單3</a>
</li>
</ul>
找自己的子層元素內容
<ul>
<li>
<h3>選單1</h3>
</li>
<li>
<h3>選單2</h3>
</li>
<li>
<h3>選單3</h3>
</li>
</ul>
$(document).ready(function() {
//無效寫法: 這邊h3並無同層元素
$('ul li').click(function(event){
$(this).find('h3').addClass('active').siblings().removeClass('active');
});
});
$(document).ready(function() {
$('.cart li').click(function(event) {
$(this).find('h3').toggleClass('active').parent().siblings().find('h3').removeClass('active');
});
});
<body>
<ul class="cart clarfix">
<li><h3>產品一</h3></li>
<li><h3>產品二</h3></li>
<li><h3>產品三</h3></li>
<li><h3>產品四</h3></li>
<li><h3>產品五</h3></li>
<li><h3>產品六</h3></li>
</ul>
</body>
$(document).ready(function() {
//被點選以外的其它同層元素會執行active,被點選的li則不執行
$('.cart li').click(function(event) {
$(this).siblings().find('h3').addClass('active');
});
});