如何在點擊上交換圖片？

我wnt交換圖像點擊，bt這裏，如果m點擊從下來的圖像向上，但再次沒有下來的圖像，如果米點擊該圖像... m geting some error- x.attr（「src 「）未定義如何在點擊上交換圖片？

$(document).ready(function() { 
    $('#sortdivlink').click(function() { 

     var x = $("img[src$='../Images/Sort_down.png'][name='stCodeDSC']"); 

     if (x.attr("SRC") == "../Images/Sort_down.png") { 
      x.attr('src', x.attr('src').replace("../Images/Sort_down.png", "../Images/sort_up.png")); 
     } 
     else { 
      x.attr('src', x.attr('src').replace("../Images/sort_up.png", "../Images/Sort_down.png")); 
     } 
    }); 
});

來源

2012-04-10 SHAURAJ SINGH

你可以顯示一些標記請？ – 2012-04-10 14:24:07

選擇器中的$做什麼？「img [src $ ='../Images/Sort_down.png'] [name ='stCodeDSC'] – Timmerz 2012-04-10 14:26:13

@Timmerz它的'屬性以'選擇符結束：http://api.jquery.com/attribute-ends- with-selector/ – 2012-04-10 14:28:16

你可以使用一個<div>與一個background-image和尺寸CSS類，並使用$（DIV）.toggleClass（「新形象」），以使用更新的background-image

，這將大大簡化你的代碼。

[編輯]

<html> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
    <style> 
    .first-image 
    { 
     background-image: url('http://www.google.com/press/zeitgeist2001/google_logo.gif'); 
     width:218px; 
     height:90px; 
     background-position:center; 
     background-repeat:no-repeat; 
    } 

    .second-image 
    { 
     background-image: url('http://www.google.com/doodle4google/2008/images/regional_doodles/CO-80106-16a267f8-3.jpg'); 
     width:350px; 
     height:224px; 
     background-position:center; 
     background-repeat:no-repeat; 
    } 
    </style> 

    <script> 
    $(document).ready(function() 
    { 
     $("#target-div").click(function() 
     { 
      $("#target-div").toggleClass("second-image"); 
     }); 
    }); 
    </script> 
    </head> 
    <body> 
    <div id="target-div" class="first-image"></div> 
    </body> 
    </html>

來源

2012-04-10 14:28:35 Timmerz

做你有任何樣本爲此// – 2012-04-11 06:47:13

很高興你問...發佈了上面的工作版本 – Timmerz 2012-04-11 06:57:53

感謝兄弟.. :) – 2012-04-12 05:54:34

我猜想這是因爲選擇你使用分配x，這很可能返回null。我認爲可能增加ID或CSS類的圖像，然後選擇簡化到這樣的事情：

var x = $('img.sortDirectionImage');

或者，如果你知道sortdivlink元素，只會有一個單一的形象，你可以簡單地搜索該元素的上下文內的img元件，例如：

// within the click function scope 
var x = $('img', this);

編輯

此外，我建議使用多個R無法識別的變量名稱;你可能知道x是什麼，但下一個讀取你的代碼的人可能不會。

來源

2012-04-10 14:24:50 Richard

這也將解決問題，找到一個圖像的src，然後更改src，因此不再找到它 – Archer 2012-04-10 14:27:42

看我的劇本我很久以前寫的（沒有任何的jQuery）：

function changeImg(element) { 
     var img = document.getElementById(element); 
     if (img.src == "../images/expand.png") { 
      // collapse 
      img.src = "../images/collapse.png"; 
     } 
     else { 
      // expand 
      img.src = "../images/expand.png"; 
     } 
    }

普通的HTML標記：

<span onclick="changeImg('ansprechpartner');return false;">...</span>

也許將爲你工作...

來源

2012-04-10 14:37:48 jordi

回答

相關問題