使用 jQuery 動態切換圖片
使用 jQuery 動態切換圖片,做出設計稿中的部分版型,如圖:( 出處 12/10 每日任務 )
TIPS
助教的解答使用的技巧是 jQuery 的 attr()
方法來替換點擊到的 src 連結,attr()
方法範例可以參考 此連結 。
attr()
可修改 HTML 標籤裡的屬性 →$('選擇器').attr('數值','數值');
$(this)
只針對目前點擊的元素做動作。
作法 Cosepen 實做範例
- HTML : 先架出上下兩區塊,分別為點選後顯示區塊 & 點選的小圖區塊
- JS : 使用
attr()
- 點擊
.carousel__inner__link
時修改.carousel__item__pic--active
圖片的 HTML 屬性 → 因為使用$this()
,所以.carousel__item__pic--active
圖片中的 src 會變成點擊的那個元素的.carousel__inner__link
中的 href 圖片。
- 點擊
- 另外結尾處助教長使用
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 的差別是 ?
event.preventDefault();
會阻擋預設要發生的事件。event.stopPropagation();
會阻擋發生冒泡事件。- 而
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 設計模式
文章
留言