Jquery/Javascript 使用 IF/ELSE 語句更改 img SRC

Question

我對 javascript 很陌生，我無法讓 IF/ELSE 語句在我正在試驗的一種基本配置器中工作，我確信我正在做一些愚蠢的事情。 我有一個主圖像，它會更改以顯示選擇的結果，問題是 IF 語句似乎無法正常工作，就像它沒有通過條件一樣：基本上是在選擇顏色（黑色/銀色）時) 沒有問題，但是當單擊插入時，它應該更改 scr 執行 if/else 測試以相應地更改 scr 屬性。

    var img = $("#picture");

    $("#case_black").click(function() {
        img.attr("src", "http://s32.postimg.org/xzqjausjp/black_b.jpg");
    });

    $("#case_silver").click(function() {
        img.attr("src", "http://s32.postimg.org/j2n46ylmt/silver_s.jpg");
    });

    $("#insert_silver").click(function() {
        if (img.src == "http://s32.postimg.org/xzqjausjp/black_b.jpg") {
            img.attr("src", "http://s32.postimg.org/wfq99kqh1/black_s.jpg");
        } else {
            img.attr("src", "http://s32.postimg.org/j2n46ylmt/silver_s.jpg");
        }       
    });

這是一個可以幫助您幫助我的小提琴：

https://jsfiddle.net/1qdwaa8o/

和一個片段：

 var img = $("#picture"); $("#case_black").click(function() { img.attr("src", "http://s32.postimg.org/xzqjausjp/black_b.jpg"); }); $("#case_silver").click(function() { img.attr("src", "http://s32.postimg.org/j2n46ylmt/silver_s.jpg"); }); $("#insert_silver").click(function() { if (img.src == "http://s32.postimg.org/xzqjausjp/black_b.jpg") { img.attr("src", "http://s32.postimg.org/wfq99kqh1/black_s.jpg"); } else { img.attr("src", "http://s32.postimg.org/j2n46ylmt/silver_s.jpg"); } });

 body{ background-color:black; padding:0; margin:0; border:0; text-align:center; } .main{ width:432px; height:422px; position:absolute; display:inline-block; margin-left:-216px; margin-top:10%; } #img_wrapper{ width:350px; margin-left:41px; } #selector_wrapper{ width:auto; } .selector_button{ width:50px; height:50px; border-radius:25px; border:1px solid #1C1C1C; margin: 0 10px; cursor:pointer; } .clear{ clear:both; } #case_black{ background-image:url("http://s32.postimg.org/ipqo3nx1d/black.png"); float:left; } #case_silver{ background-image:url("http://s32.postimg.org/5qtwxrim9/silver.png"); float:left; } #insert_wood{ background-image:url("http://s32.postimg.org/ulderu3gh/wood.png"); float:left; } #insert_silver{ background-image:url("http://s32.postimg.org/5qtwxrim9/silver.png"); float:left; } #insert_black{ background-image:url("http://s32.postimg.org/ipqo3nx1d/black.png"); float:left; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <body> <div class="main"> <div id= "img_wrapper"> <img id= "picture" src="http://s32.postimg.org/xzqjausjp/black_b.jpg" alt="CD1000 with different finishes" /> </div> <div id= "selector_wrapper"> <div id= "case"> <div class= "selector_button" id= "case_black"></div> <div class= "selector_button" id= "case_silver"></div> </div> <div class= "clear"></div> <div id= "inserts"> <div class= "selector_button" id= "insert_black"></div> <div class= "selector_button" id= "insert_silver"></div> <div class= "selector_button" id= "insert_wood"></div> </div> </div> </div> </body>

Answer 1

img是一個 jQuery 對象，因此img.src將是undefined 。

您需要測試img[0].src或img.prop('src') 。

Answer 2

使用img.attr("src")而不是img.src獲取/設置圖像的img.attr("src")

或者您可以使用： img.get(0).src 。 img.get(0)類似於document.querySelector('someSelectorToSelectYourImageAbove').src;

Jquery/Javascript 使用 IF/ELSE 語句更改 img SRC

問題描述

2 個解決方案

解決方案1
1 已采納 2016-05-08 15:34:10

解決方案2
0 2016-05-08 15:37:45

Jquery/Javascript 使用 IF/ELSE 語句更改 img SRC

問題描述

2 個解決方案

解決方案1 1 已采納 2016-05-08 15:34:10

解決方案2 0 2016-05-08 15:37:45

解決方案1
1 已采納 2016-05-08 15:34:10

解決方案2
0 2016-05-08 15:37:45