如何用toggle/$this指定圖片顯示

jquery #javascript 切版網頁切版 $this

thewayfly 2022-01-04 18:20:06 ‧ 979 瀏覽

分享至

超級新手求教，最近在做切版練習，希望可以做一個點擊左邊選項，右邊出現指定圖片的功能（初始狀態顯示.pic1，點擊.tab2出現對應的.pic2，其他圖片隱藏）。

附上codepen連結，在JS第18行/html 115行，我自己猜應該是一開始的
$(".img").hide();
$(".pic1").show();
擺在不對的位置才導致後面的toggle()無法作用，但不知道該如何debug，還請大大們協助

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

YoChen

iT邦研究生 1 級 ‧ 2022-01-05 11:56:27

最佳解答

其實您的toggle都有成功作用，
只是每次點擊都觸發了兩次(show了又hide)，
所以當然感覺沒反應囉~XDDD

主要是因為您把事件綁定在父層的關係，
導致點了label觸發一次，input打勾(label for input)又觸發一次

解法: 把事件綁在input就可以了

$(function () {
    $(".img").hide(); // 隱藏所有圖片
    // $(".pic1").show(); 這個應該不用預設顯示，幫你註解起來
    $(".tab-item>input").on("click", jQueryFn); // 選擇.tab-item底下的input元素

    function jQueryFn() {
        let no = $(this).attr("id").substr(4, 1); // $(this)變成input元素，所以改抓id attribute
        // $(`.pic${no}`).show();
        // console.log(no);
        $(`.pic${no}`).toggle();
    }
});

回應 2
分享
檢舉

thewayfly iT邦新手 5 級 ‧ 2022-01-06 13:17:36 檢舉

感謝大大幫忙，有work了
內個，想再追加問一題，如果想要前一張已經顯示過的圖片，在我點下一張之後自動消失的畫，應該是要用if判斷式來做嗎？新手求提點

YoChen iT邦研究生 1 級 ‧ 2022-01-07 12:34:46 檢舉

thewayfly
以您的case來說，
最簡單的方法當然就是讓所有圖片先hide，
然後再針對要顯示的圖片show，
作法就類似海綿寶寶大大提供的那樣~XDDD

這樣的作法確實要加上if判斷，
來確認按下去的input是否打勾(checked)，
只有打勾時才show對應圖片，
如果是取消的話就不動作，
所以概念上會像這樣

$(function () {
    $(".img").hide();
    $(".tab-item>input").on("click", jQueryFn);

    function jQueryFn() {
        let no = $(this).attr("id").substr(4, 1);
        $(".img").hide(); // 讓所有圖片先隱藏
        
        // if(這個input元素狀態為checked) {
        //    $(`.pic${no}`).show();
        // } 
    }
});

補充一下，
這樣的UI設計邏輯其實不太推薦，
因為很容易造成明明有打勾卻沒有圖片顯示的狀態，
e.g. 選1 > 選2 > 取消2

但這部分就要您自行評估了，
是要再針對這種狀況去顯示有打勾的圖片呢，
還是沒有圖片也沒關係，
以上供您參考~

登入發表回應

海綿寶寶

iT邦大神 1 級 ‧ 2022-01-05 10:44:14

只改了兩列

    $(".img").hide();
    $(`.pic${no}`).show();

修改後完整 javascript 如下
看看是否合用

$(document).ready(function () {
  $("input[type='text']").val("");
  // console.log(1);

  $(".A-input[type='text'],.A-input[type='date']").focusout(function () {
    if ($(this).val() !== "") {
      // console.log(2);
      $(this).siblings(".A-label").addClass("hasContent");
      $(this).addClass("focusOut");
    } else {
      // console.log(3);
      $(this).siblings(".A-label").removeClass("hasContent");
      $(this).removeClass("focusOut");
    }
  });
});

$(function () {
$(".img").hide();
$(".pic1").show();
  $(".tab-item").on("click", jQueryFn);
 
  function jQueryFn() {
     
    let no = $(this).attr("class").substr(12, 1);
    // $(`.pic${no}`).show();
    // console.log(no);
    $(".img").hide();
    $(`.pic${no}`).show();
  }

});

// $("#submit").click(function () {
//   console.log(1);

//   var name = $("#name").val();
//   var email = $("#email").val();

//   if (name == "") {
//     // 判斷空值時加上驗證提示樣式

//     alert("尚未完成表單！");
//   } else {
//     // 否則移除提示樣式並傳送資料給API
//     console.log(name);
//     console.log(email);

//     $.ajax({
//       url:
//         "https://script.google.com/macros/s/AKfycbz9goVVwtA5s-sbP_JF7WFBP8kPZ2SK48c5grCVCKe8AtFlKakR_vHwpYcHzmTs_TUvLA/exec",
//       // 複製Apps Script部署後的網址
//       data: {
//         name: name, //以JSON格式傳送資料
//         email: email
//       },
//       success: function (response) {
//         console.log("success");
//         if (response == "成功") {
//           //回傳“成功”時跳出提示
//           alert("成功");
//         }
//       }
//     });
//   }
// });