jQuery按钮单击更改图像

$("#button").click(function () { //debugger; if ($("img[id=image][src:contains(Grass)]")) $("img").attr({ src: "/Content/images/Spring.jpg", alt: "Spring" }); else $("img").attr({ src: "https://stackoverflow.com/Content/images/Grass.jpg", alt: "Grass" }); });   

我有简单的图像和按钮forms，我希望每个按钮点击图像更改。 逻辑非常简单。 默认情况下， image src = https://stackoverflow.com/Content/images/Grass.jpg当我第一次点击按钮时图像被更改，但是当我第二次点击它时它不会改变回来。 我检查调试器并找出条件$("img[id=image][src:contains(Grass)]")总是true 。 但是第一次按钮点击后不应该变成假的吗？

如果我宣布

  var img1 = $("img#image[src:contains(Grass)]"); var img2 = $("img#image[src:contains(Grass2)]"); var img3 = $("img#image[src:contains(blabla)]"); 

每个img1.length = 1 img2.length = 1 img3.length = 1为什么？

但

 var img1 = $("img#image[src*='Grass']"); var img2 = $("img#image[src*='Grass2']"); var img3 = $("img#image[src*='blabla']"); 

每个img1.length = 1 img2.length = 0 img3.length = 0这是预期的。

这是否意味着src:contains(text)和src*=text是如此不同？

Answer 1

 $("#button").click(function () { var alt = ($('img#image[alt="Grass"]').length) ? 'Spring' : 'Grass'; $('img#image').attr({ src: "/Content/images/"+alt+".jpg", alt:alt }); });     

Answer 2

行if ($("img[id=image][src:contains(Grass)]"))将始终为true。 $（）函数返回一个jQuery对象，一个对象总是计算为true 。 您需要检查结果的长度是否为0。

if ($("img[id=image][src:contains(Grass)]").length > 0)

Answer 3

试试这个：

 var img = $("#image"), a = img.parent('a'); $("#button").click(function () { var str = (img.attr('src').search('Grass') != -1) ? "Spring" : "Grass", src = "/Content/images/"+str+".jpg"; img.attr({ src: src, alt: str }); a.attr("href", src); }); 

首先我们缓存#image jQuery对象，每次按下按钮时都不需要选择它。 然后我们在src字符串上进行正常的javascript搜索。 如果它有草，那么我们将它改为spring。 因为我们缓存了#image jQuery对象，所以我们不必重新选择它来更改src和alt属性。 此外，如果你要更改img src我猜你可能想要更新它周围的链接。

Answer 4

一个简单的解决方法是替换它：

 $("img[id=image][src:contains(Grass)]") 

…有了这个：

 $("#image[src*=Grass]").length 

相关选择器 ：

 a^=ba starts with b a$=ba ends with b a!=ba does not equal b a*=ba contains b 

Answer 5

  $("#button").click(function () { var value = ($("img#image[src*='Grass']").length) ? 'Spring' : 'Grass'; $("img").attr({ src: "/Content/images/" + value + ".jpg", alt: value }); });