使用 jQuery 動態切換圖片

使用 jQuery 動態切換圖片，做出設計稿中的部分版型，如圖：( 出處 12/10 每日任務 )

TIPS

助教的解答使用的技巧是 jQuery 的 attr() 方法來替換點擊到的 src 連結，attr() 方法範例可以參考 此連結 。

• attr() 可修改 HTML 標籤裡的屬性 → $('選擇器').attr('數值','數值');
• $(this) 只針對目前點擊的元素做動作。

作法 Cosepen 實做範例

1. HTML : 先架出上下兩區塊，分別為點選後顯示區塊 & 點選的小圖區塊
2. JS : 使用 attr()
   • 點擊 .carousel__inner__link 時修改 .carousel__item__pic--active 圖片的 HTML 屬性 → 因為使用 $this() ，所以 .carousel__item__pic--active 圖片中的 src 會變成點擊的那個元素的 .carousel__inner__link 中的 href 圖片。
3. 另外結尾處助教長使用 return false; 而非 e.preventDefault(); 可參考下方的解說。

<div class="carousel">
    <div class="carousel__item--active">
        <img class="carousel__item__pic--active" src="...">
    </div>
        <!--縮圖區塊-->
    <div class="carousel__inner">
        <a class="carousel__inner__link" href="...">
            <img class="carousel__inner__pic" src="...">
        </a>
        <a class="carousel__inner__link" href="...">
            <img class="carousel__inner__pic" src="...">
        </a> <a class="carousel__inner__link" href="...">
            <img class="carousel__inner__pic" src="...">
        </a>
    </div>
</div>

$(document).ready(function () {
    $('.carousel__inner__link').click(function () { 
        $('.carousel__item__pic--active').attr('src', $(this).attr('href'));
        return false;
    });
});

event.preventDefault() 跟 return false 的差別是 ?

1. event.preventDefault(); 會阻擋預設要發生的事件。
2. event.stopPropagation(); 會阻擋發生冒泡事件。
3. 而 return false; 則是前面兩者的事情他都會做：
   • 他會做 event.preventDefault();。
   • 他會做 event.stopPropagation();。
   • 停止 callback function 的執行並且立即 return 回來。

資料來源

六角學院

• 網頁切版直播班-2020秋季
• 第八週設計稿 – 大型寵物服務網、大型訂房網 ( 圖片空間 week8 資料夾 )
• web layout training gulp master 資料夾 ( 使用 EJS 編譯 layout )
  • web-layout-training-gulp ( 內含 BS 不須 npm 下載 )
• emmet 熱鍵中文表、VS Code 編輯器熱鍵。
• 7+1 SCSS 設計模式

文章

• event.preventDefault() 跟 return false 的差別是 ?