jQuery - 基于点击更改图片

目前我有一个带有向下指向图标的标题。如果标题被点击，我希望图像变成向上的图像。jQuery - 基于点击更改图片

我试过使用“？”运算符来查询它是否是，但我不是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; 
});

我知道这段代码不起作用。有人能告诉我如何？谢谢！

来源

2009-06-30 James Brooks

这将做到这一点。请注意，您需要在百万运算符内进行比较。如果你只是做"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); 
});

我刚刚意识到你的HTML的一个基本问题，如果你的JavaScript的CSS选择器是准确的。您要求.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>

这是一个nono。你可以做的是这样的：

<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); 
});

来源

2009-06-30 19:58:25 cgp

-1

$(".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; 
}

来源

2009-06-30 19:52:43 Evert

他的_shouldn't_工作，你没有比较任何东西，src attr调用三元总是将eval为true。 – cgp 2009-06-30 20:02:37

哎呀，你是对的 – Evert 2009-07-01 19:47:12

您没有使用在有条件的东西。

$(".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"。

来源

2009-06-30 19:56:12 MiffTheFox

图像不会改变。 – 2009-06-30 20:01:54

jQuery - 基于点击更改图片

回答

相关问题