使用jQuery更改圖像源

個人DOM看起來像這樣：

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

當有人單擊圖像時，我但願圖像src更改成<img src="imgx_off.gif">其中x表示圖像編號1或2。

這可能嗎，仍是我必須使用CSS來更改圖像？

---

#1樓

我今天也有一樣的疑問，我是這樣作的：

//<img src="actual.png" alt="myImage" class=myClass>
$('.myClass').attr('src','').promise().done(function() {
$(this).attr('src','img/new.png');  
});

---

#2樓

沒法使用CSS更改圖像源。

惟一可行的方法是使用Javascript或jQuery之類的任何Javascript庫。

邏輯-

這些圖像位於div內，而且該圖像沒有class或id 。

所以，邏輯將選擇圖像所在的div內的元素。

而後使用循環選擇全部圖像元素，並使用Javascript / jQuery更改圖像src。

帶演示輸出的示例代碼-

$(document).ready(function() { $("button").click(function() { $("#d1 .c1 a").each(function() { $(this).children('img').attr('src', 'https://www.gravatar.com/avatar/e56672acdbce5d9eda58a178ade59ffe'); }); }); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <div id="d1"> <div class="c1"> <a href="#"><img src="img1_on.gif"></a> <a href="#"><img src="img2_on.gif"></a> </div> </div> <button>Change The Images</button>

---

#3樓

我將向您展現如何更改圖像src ，以便當您單擊圖像時，它會在HTML中的全部圖像（特別是在d1 id和c1類中）中旋轉...不管您有2個或更多圖像在您的HTML中。

我還將向您展現文檔準備好後如何清理頁面，以便最初僅顯示一張圖像。

完整代碼

$(function() {

    var $images = $("#d1 > .c1 > a").clone();  

    var $length = $images.length;
    var $imgShow = 0;

    $("#d1 > .c1").html( $("#d1 > .c1 > a:first") );  

    $("#d1 > .c1 > a").click(function(event) { 

        $(this).children().attr("src", 
                        $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();

    });
});

細目

1. 建立包含圖像的連接的副本（注意：您也能夠利用連接的href屬性來增長功能……例如，在每一個圖像下方顯示工做連接 ）：

   var $images = $("#d1 > .c1 > a").clone(); ;

2. 檢查HTML中有多少張圖片，並建立一個變量來跟蹤顯示的圖片：

   var $length = $images.length; var $imgShow = 0;

3. 修改文檔的HTML，以便僅顯示第一張圖像。 刪除全部其餘圖像。

   $("#d1 > .c1").html( $("#d1 > .c1 > a:first") );

4. 綁定一個函數以在單擊圖像連接時進行處理。

   $("#d1 > .c1 > a").click(function(event) { $(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") ); event.preventDefault(); });

   上面代碼的核心是使用++$imgShow % $length循環瀏覽包含圖像的jQuery對象。 ++$imgShow % $length首先將咱們的計數器增長一，而後使用多少個圖像修改該數字。 這將使結果索引從0循環到length-1 ，它們是$images對象的索引。 這意味着此代碼將適用於二、三、五、10或100張圖像...依次循環瀏覽每一個圖像，並在到達最後一個圖像時在第一個圖像處從新啓動。

   此外， .attr()用於獲取和設置圖像的「 src」屬性。 爲了從$images對象中選擇元素，我使用$(selector, context)形式將$images設置爲jQuery上下文 。 而後，我使用.eq()來選擇僅包含我感興趣的特定索引的元素。

---

具備3張圖片的jsFiddle示例

您也能夠將src存儲在數組中。
具備3張圖片的jsFiddle示例

如下是在圖像周圍合併來自定位標記的href的方法：
jsFiddle示例

---

#4樓

您也能夠經過如下方式使用jQuery：

$(".c1 img").click(function(){
     $(this).attr('src','/new/image/src.jpg');   
});

若是圖像源有多個狀態，則能夠設置條件。

---

#5樓

欲得到更多信息。 我嘗試使用如下語法在廣告圖片的jquery中使用attr方法設置src屬性，例如： $("#myid").attr('src', '/images/sample.gif');

此解決方案頗有用，而且可使用，可是若是更改路徑，則圖像的路徑也會更改而沒法使用。

我正在尋找解決此問題的方法，但沒有發現任何問題。

解決方案是將「 \\」放在路徑的開頭： $("#myid").attr('src', '\\images/sample.gif');

這個技巧對我很是有用，我但願對其餘人也有用。