代码之家 › 专栏 › 技术社区 › James Brooks

jquery-基于单击更改图像

operators image jquery

James Brooks · 技术社区 · 15 年前

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

我试过用“?”操作员查询它是否是,但我不完全确定它是如何工作的。我现在正在使用这个代码。

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

我知道这个代码不起作用。有人能告诉我怎么做吗?谢谢!

3 回复 | 直到 15 年前

cgp 15 年前

这就行了。请注意,需要在Terrenary运算符中进行比较。如果你只是这么做的话 "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);
});

我刚刚意识到,如果您的JavaScriptCSS选择器是准确的,那么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);
});

MiffTheFox 15 年前

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

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

-1

Evert 15 年前

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