jQuery|操控網頁元素1

第 11 屆 iThome 鐵人賽

DAY 18

自我挑戰組

網頁排版個人學習筆記系列第 18 篇

11th鐵人賽

echocarrie

2019-09-19 00:29:55

6520 瀏覽

分享至

文章提要

$(this)、parent()、siblings()、find()、find()與siblings()差異

$(this)

只針對目前點擊的元素做動作(可重複點擊)；操作本身元素

範例
以選單為例，一般使用動態(此例為.menu a)加上.active(可自命名)，再到jQuery寫click並用addClass啟動它，所有選單會一起執行動作，如果想要按哪個才執行那個，可用this。但如果同時點選很多個就會很多個選單一起執行動作
如果想要點擊執行動作，再次點擊取消剛剛的動作，jQuery可把addClass換toggleClass

註: 此圖原初處為六角學院

parent()

點擊子元素後父元素也有其它效果產生
parent()示意圖

範例
上方示意圖: 點擊子元素(加入購物車按鈕.addcart)，父元素(li)也呈現設定的變化(背景變黃色)
一般只會於.addcart有效果，希望點擊加入購物車後li(父)也有反應的話可使用parent找到父階層元素
- 於li(父元素)與.addcart(子元素)使用動態加上active，再到jQuery讓active被啟用
- 目前點擊的東西this(.addcart)執行動作後，再針對this的父元素( li)做toggleClass('active'); 讓它執行css寫的動作

<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');
    });
});

siblings()

找自己以外的同層元素

下方程式碼中，在點擊選擇器1後→先指定我自己(this)→動態加上addClass active後→希望同層級可以做一些不同設定不同事情，即可使用siblings
- 當中的active為自訂的class名稱(動態)
  - 『動態』是先寫好一段程式碼，以程式碼來操控網頁元素，讓它能夠在使用者觸發某項事件後，例如點擊 (click)，再來執行後面的動作，例如增加或移除 class、觸發某個動畫等等，這就是動態
  - 『非動態』則是網頁載入後的畫面只會根據原始碼來渲染，原始碼如何網頁就如何

$(document).ready(function() {
    $('選擇器1').click(function(event) {
        $(this).addClass('active').siblings().removeClass('active');
    });
});

this()與加入siblings()的差異範例
- 如下範例中如果li內還有a使用siblings()會無效，因為li內的a無其他同層元素。

<ul class="menu">
    <li>
        <a href="#">選單1</a>
    </li>
    <li>
        <a href="#">選單2</a>
    </li>
    <li>
        <a href="#">選單3</a>
    </li>
</ul>

find()

找自己的子層元素內容

錯誤範例
- 此範例不成立，無作用: 先指定自己，找到裡面的h3執行動態active，再下sibling找自己(h3)以外的同層元素，但內無東西所以無法做清除作用。

<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');
  });
});

範例1被點擊的元素才會執行active。點產品1再點產品2，會取消產品1的active
- 指定自己 li→找自己的子層元素h3→執行active→再回去找h3的父元素li→自己li以外的同層元素中的h3→做移除active動作
- 白話:點擊其中一個h3後，執行active。要再次點擊其他h3但不想要原本的h3也是active狀態，就必須要移除其它同的active狀態，active留一即可

$(document).ready(function() {    
    $('.cart li').click(function(event) {
        $(this).find('h3').toggleClass('active').parent().siblings().find('h3').removeClass('active');
    });
});

範例2 被點選以外的其它同層元素會執行active，被點選的li則不執行
- 指定自己 li→li自己以外的同層元素(如果點選產品一，以外的同層元素即產品二~產品六)→找自己以外的子層元素h3→執行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');
    });
});

find()、siblings()、parent()差異