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이 아닌 값이 항상 참이기 때문에 항상 참입니다.

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

자바 스크립트 CSS 선택기가 정확한 경우 HTML에 대한 근본적인 문제가 있습니다. .icon [id = x]를 요청하고 .message_head 클래스의 ID 속성을 사용하여 아이콘의 ID를 찾습니다. 이 기능을 사용하려면 두 HTML 모두에 대해 동일한 ID를 가져야합니다. 이는 잘못된 HTML입니다. 당신의 HTML이 어떻게 생겼는지 상상해보십시오 :

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

이것은 nono입니다. 당신이 할 수있는 일은 다음과 같습니다 :

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

? : (삼항 연산자)에 대한 추가 정보. 이 : 당신은 조건에서 아무것도 사용하지

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

Answer 3

:

var A = B ? C : D; 

는 다음과 같이 동일한입니다. 이 행동 (즉, 최대 대신 아래)를 뒤쪽으로 생산하는 경우, 당신은 "block"에 "none"을 변경해야

는

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

참고.