jQuery - クリックに基づいて画像を変更してください

Question

現在、下向きのアイコンで見出しがあります。ヘッダーがクリックされた場合は、イメージを上向きに変更します。

私は "？"それがどういうものかを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; 
}); 

このコードは機能しません。誰かが私に方法を教えてもらえますか？ありがとう！

Answer 1

これはトリックを行います。 terenary演算子内で比較を行う必要があることに注意してください。 "something" ? "blah" : "resultの場合は、null以外の値が常にtrueになるため、常にtrueになります。

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で基本的な問題の1つを認識しました。 .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> 

これはノンです。あなたができることは次のとおりです：

Answer 2

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

？:(3値演算子）の詳細情報この：あなたは条件付きで何かを使用していない

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

Answer 3

：

var A = B ? C : D; 

はとまったく同じです。

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

注これは（すなわち、アップの代わりに、ダウン）動作を逆方向に生成する場合、あなたは"block"に"none"を変更する必要があること。