jquery改變src屬性結束

好吧，所以我試圖在兩個圖像之間切換開關。一個是動畫gif，另一個是jpg。基本上，客戶需要大量的這些動畫產品的功能，但我想添加一個開關來打開和關閉它，因爲它變得非常忙碌。所以，我想知道是否所有的圖像都帶有一個類，我是否可以設置一個切換來將所有圖像的最後三個字符從gif更改爲jpg，因爲src的其餘部分將會不同。jquery改變src屬性結束

這顯然不會工作，但我希望你可以按照邏輯。

$('img.img-toggle').click(function() { 
if() //If the image ends in .jpg 
{ 
    //Somehow strip the attribute of .jpg 
    //Somehow append the attribute to add .gif 
} else { 
    //Somehow stip the attribute of .gif 
    //Somehow append the attribute to add .jpg 
} 
});

有什麼建議嗎？如果我的邏輯愚蠢，另一種選擇也會很好。我對此很陌生。我嘗試了一些不同的東西，但無法弄清楚。

由於提前，凱文

來源

2012-12-20 kevin11189

[whathaveyoutried.com]（http://mattgemmell.com/2008/12/08/what-have-you-tried/）？ [javascript確定字符串結尾]（https://www.google.ie/webhp?hl=zh-CN&tab=ww#hl=zh-CN&tbo=d&sclient=psy-ab&q=javascript+determine+end+of+string&oq=javascript+determine+ +字符串的末尾+ gs_l = hp.3..33i29l2.320632.327824.5.328031.35.33.0.0.0.7.273.2943.27j5j1.33.0.les％3B..0.0 ... 1c.1.9ivRY0tVWHI＆PBX = 1＆BAV = on.2，或.r_gc.r_pw.r_cp.r_qf。＆bvm = bv.1355534169，d.Yms＆fp = b4a5795965c8af13＆bpcl = 40096503＆biw = 1221＆bih = 669）-1，因爲我不認爲這個問題顯示任何研究工作。 – Nope

：

來源

2012-12-20 17:04:49 Bruno

是的，這是更好一點。起初我沒有意識到最後一個沒有切換所有圖像。我使它切換了所有，但他們都會回來，同一個來源。 – kevin11189

一種方式是做這樣的事情...

$('img.img-toggle').click(function() { 
    var src = $(this).attr("src"); 
    if (src.indexOf(".jpg") != -1) //If the image ends in .jpg 
    { 
     src = src.replace(".jpg", ".gif"); 
    } else { 
     src = src.replace(".gif", ".jpg"); 
    } 
    $(this).attr("src", src); 
});

來源

2012-12-20 16:57:56 Archer

這不適用於''和' ' –

是的，像大多數的建議在本頁。每個人都在假設合理的圖像名稱。 – Archer

這很完美。我唯一改變的是$（this）到$（'img.img-toggle'），因此它影響了頁面上的所有圖像。儘管如此，這更多的是個人偏好。非常感謝你。 – kevin11189

我們可以從圖像搶過去三個或四個字符SRC字符串和比較一下。

$('img.img-toggle').click(function() { 
    var ending = this.src.slice(-3); 

    switch(ending) { 
     case 'jpg': 
      this.src = this.src.replace(/jpg$/, 'gif'); 
      break; 
     case 'gif': 
      this.src = this.src.replace(/gif$/, 'jpg'); 
      break; 
    } 
});

我使用了switch/case，以防將來可能會有更多格式。

另一種選擇是使用jQuerys .toggle()方法在某種程度上像

$('img.img-toggle').toggle(function() { 
    this.src = this.src.replace(/jpg$/, 'gif'); 
}, function() { 
    this.src = this.src.replace(/gif$/, 'jpg'); 
});

.toggle()將您需要提供這兩種功能之間自動切換。如果你想在這裏所有圖像是運行此操作

$('img.img-toggle').click(function() { 
    var $img = $(this); 
    var src = $img.prop('src'); 
    if (src.match(/\.jpg$/)) { 
     $img.prop('src', src.replace(/\.jpg$/, '.gif')); 
    } else { 
     $img.prop('src', src.replace(/\.gif$/, '.jpg')); 
    } 
});

Example fiddle

來源

2012-12-20 16:58:11 jAndy

我會搜索'/ jpe？g $ /'來代替，以防萬一。 – Blazemonger

$('img.img-toggle').click(function() { 
    var src = $(this).attr("src"); 
    if (src.indexOf(".jpg") != -1) { 
     $(this).attr("src", src.replace(".jpg", ".gif")); 
    } 
    else { 
     $(this).attr("src", src.replace(".gif", ".jpg")); 
    } 
});

來源

2012-12-20 16:58:13 Bruno

試試這個。

$('img.img-toggle').click(function() { 
    (".imgClass").each(function() { 

     var src = $(this).prop("src"); 

     if(/\.jpg$/i.test(src)) { 
      $(this).prop("src", src.replace(/\.jpg$/, ".gif")); 
     } else { 
      $(this).prop("src", src.replace(/\.gif$/, ".jpg")); 
     } 
    }); 
});

來源

2012-12-20 16:58:37

Yay，另一個幻影downvote –

$('img.img-toggle').click(function() { 
    src = $(this).attr('src'); 
    if (src.substr(src.length - 4) == ".jpg") //If the image ends in .jpg 
    { 
     src = src.replace(".jpg", ".gif"); 
    } else { 
     src = src.replace(".gif", ".jpg"); 
    } 
});

來源

2012-12-20 17:01:10 Samsquanch

jquery改變src屬性結束

回答

相關問題