使用 jQuery 動態切換圖片

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

使用 jQuery 動態切換圖片

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 回來。

資料來源

六角學院

文章

最後修改日期: 30 12 月, 2020

作者