jQuery - 根据点击更改图像答案

【问题标题】：jQuery - Change image based on clickjQuery - 根据点击更改图像
【发布时间】：2009-06-30 19:49:45
【问题描述】：

目前我有一个带有向下图标的标题。如果单击标题，我希望图像变为向上的图像。

我尝试过使用“？”操作员来查询它是否是，但我不是 100% 确定它是如何工作的。我目前正在使用此代码。

// Toggle message_body
$(".message_head").click(function(){
    var id = $(this).attr("id");
    $(this).next(".message_body").slideToggle(500);
    $(".icon[id=" + id + "]").attr("src", "../images/admin/Symbol_Down.png" ? : "../images/admin/Symbol_Up.png");
    return false;
});

我知道这段代码不起作用。有人可以告诉我怎么做吗？谢谢！

【问题讨论】：

标签： jquery image operators

【解决方案1】：

这样就可以了。请注意，您需要在三元运算符中进行比较。如果你只是做"something" ? "blah" : "result，它总是为真，因为非空值总是为真。

var up = "../images/admin/Symbol_Up.png";
var down = "../images/admin/Symbol_Down.png";
$(".message_head").click(function(){
    var icon = $(".icon[id=" + $(this).attr("id") + "]");
    $(this).next(".message_body").slideToggle(500);        
    icon.attr("src", this.attr("src") == up ? down : up);
});

如果您的 JavaScript css 选择器准确无误，我刚刚意识到您的 HTML 存在一个基本问题。您要求 .icon[id=x] 并使用 .message_head 类中的 ID 属性来查找图标的 ID。为此，您必须对两者具有相同的 ID，这是无效的 HTML。我想象你的 HTML 是这样的：

<div class="message_head" id="1">
  <img class="icon" src="up.jpg" id="1"/>
</div>

这是一个诺诺。你可以这样做：

<div class="message_head" id="1">
  <img class="icon" src="up.jpg" />
</div>

var up = "../images/admin/Symbol_Up.png";
var down = "../images/admin/Symbol_Down.png";
$(".message_head").click(function(){
    var icon = $('.icon', this);
    $(this).next(".message_body").slideToggle(500);        
    icon.attr("src", this.attr("src") == up ? down : up);
});

【讨论】：

嗯。图像根本没有变化。

【解决方案2】：

你没有在条件中使用任何东西。

$(".message_head").click(function(){
        var id = $(this).attr("id");
        var myBody = $(this).next(".message_body").slideToggle(500);
        $(".icon[id=" + id + "]").attr("src", (myBody.css("display") == "none") ? "../images/admin/Symbol_Down.png" : "../images/admin/Symbol_Up.png");
        return false;
});

请注意，如果这会产生向后的行为（即向上而不是向下），您应该将 "none" 更改为 "block"。

【讨论】：

图片完全没有变化。

【解决方案3】：

$(".message_head").click(function(){
    this.next(".message_body").slideToggle(500);
    this.attr("src", this.attr('src') == "../images/admin/Symbol_Down.png" ? "../images/admin/Symbol_Up.png" : "../images/admin/Symbol_Down.png");
    return false;
});

关于 ?: 的更多信息（三元运算符）。这个：

var A = B ? C : D;

完全一样：

if (B) {
  var A = C
} else {
  var A = D;
}

【讨论】：

他的不应该工作，你没有比较任何东西，src attr 调用中的三元总是会 eval 为 true。