Question

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

<a href="/Content/images/Grass.jpg"><img src="/Content/images/Grass.jpg" alt="image"    id="image"/></a>
<input type="button" id="button" name="button"/>

我有简单的图像和按钮形式，我希望每个按钮点击图像变化。逻辑非常简单。默认情况下image src = /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 });
});

<a href="/Content/images/Grass.jpg">
  <img src="/Content/images/Grass.jpg" alt="Grass" id="image"/>
</a>
<input type="button" id="button" name="button"/>

Answer 2

第if ($("img[id=image][src:contains(Grass)]"))行始终为真。 $（）函数返回一个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搜索。如果它有草，那么我们将它改为春天。因为我们缓存了#image jQuery对象，所以我们不必重新选择它来更改src和alt属性。此外，如果您要更改img src，我猜你可能想要更新它周围的链接。

Answer 4

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

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

......用这个：

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

Related selectors：

a^=b    a starts with b
a$=b    a ends with b
a!=b    a does not equal b
a*=b    a 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 });
          });

jQuery按钮单击更改图像

5 个答案: