jQuery按钮单击更改图像答案

【问题标题】：jQuery button click change imagejQuery按钮单击更改图像
【发布时间】：2011-01-30 11:09:25
【问题描述】：

$("#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差别这么大？

【问题讨论】：

标签： jquery

【解决方案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"/>

【讨论】：

应该是“img#image”，而不是image#img，为什么在这种情况下最好检查alt？
但如果我不会设置 alt。如果 alt 是常数？无论如何我都需要检查 src。
无需在#image 选择器之前添加img。 #image 高度优化，因为它是一个 id，你不应该重复 id，所以永远不会有一个不是 img 的 #image

【解决方案2】：

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

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

【讨论】：

顺便说一句，这段代码不是一个很好的处理方式，我建议不要在生产站点中使用它。但是，如果您只是在尝试 jQuery 的工作原理，那么这个答案将为您提供所需的内容。
不工作，我在调试中观看，在这两种情况下($("img[id=image][src:contains(Grass)]").length 和 $("img[id=image ][src:contains(Spring)]").length ) 同时我的长度等于 1
@Jason LeBrun 我只是在试验，但有什么更好的方法呢？
这取决于你的最终目标，但是当我想在这样的两个图像之间切换时，我通常将它们都包含在源中，并设置一个唯一的 id 属性。在我不想显示的那个上设置visibility: none CSS 属性。然后，要在它们之间切换，只需在按下按钮时更改每个属性的visibility 属性。按 DOM ID 查找比按属性值查找要高效得多。
[src:contains(Grass)] 是无效的选择器。 :contains 搜索元素的内容而不是属性。 api.jquery.com/contains-selector

【解决方案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，我猜您可能想更新它周围的链接。

【讨论】：

这是否意味着在这种情况下选择器 $("img[id=image][src:contains(Grass)]") 没有按预期工作？
@Reg yes :contains 是一个对属性不起作用的特殊选择器。 api.jquery.com/contains-selector

【解决方案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

【讨论】：

我已经使用 [attribute*=value] 而不是 [attribute:contains(value)] 解决了这个问题，但仍在研究它们返回不同结果的原因。 [attribute*=value] vs [attribute:contains(value)]

【解决方案5】：

          $("#button").click(function () {                
            var value = ($("img#image[src*='Grass']").length) ? 'Spring' : 'Grass';

            $("img").attr({ src: "/Content/images/" + value + ".jpg", alt: value });
          });

【讨论】：