使用jQuery切换图像

Question

I am having an img inside <p> tag and if I click the img or the <p> it needs to be toggled and the img should changed .

I have done it by adding jQuery(this).attr("src", "img/hide.png"); but the img is not changing can any one suggest me the right path.

Here is my script:

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery(".content").hide();
        //toggle the componenet with class msg_body
        jQuery(".heading").click(function () {
            jQuery(this).next(".content").slideToggle(500);
        });
      });
</script>

This is my CSS:

.layer1 {
margin: -5px;
padding: 0px;
width: 860px;
}

This is my markup:

<div class="layer1">
<p class="heading"><img src="img/show.png" alt="" style="margin:0 5px 0 0;" /></p>
<div class="content"></div>
<p class="heading"><img src="img/show.png" alt="" style="margin:0 5px 0 0;" /></p>
<div class="content"></div>
<p class="heading"><img src="img/show.png" alt="" style="margin:0 5px 0 0;" /></p>
<div class="content"></div>
<p class="heading"><img src="img/show.png" alt="" style="margin:0 5px 0 0;" /></p>
<div class="content"></div>
<p class="heading"><img src="img/show.png" alt="" style="margin:0 5px 0 0;" /></p>
<div class="content"></div>
</div>

Answer 1

jQuery(this).attr("src", "img/hide.png");

In this context this will refer to the .heading (the p tag). You'll have to dig down a little deeper to reference the image:

jQuery(this).find('img').attr("src", "img/hide.png");

Here's a jsFiddle to show:

http://jsfiddle.net/jonathon/yBFWM/

---

Edit I missed the content toggling bit of the question.

I've added a bit so that it will know what the 'active' content area is. Then when you click an image, it will hide the active content area and display the current. I also added a bit so the click handler wont toggle the content if it's already selected.

jQuery(".heading").click(function() {
    var $this = $(this),
        $contentArea = $this.next('.content');

    if (!$contentArea.hasClass('active')) {
        $(".content.active").slideToggle(500).removeClass('active');
        $contentArea.slideToggle(500).addClass("active");

        $this.find('img').attr("src", "http://www.google.com/images/icons/ui/doodle_plus/doodle_plus_google_logo_on_grey.gif");
    }
});

Answer 2

Did you include the line jQuery(this).attr("src", "img/show.png") in the click-handler defined by jQuery(".heading").click() ? In this case, your code cannot work because this refers to the <p class="heading"> , not to the image.

Simply change the line to

jQuery('img',this).attr("src", "img/show.png")

Answer 3

$("p").mousedown(function(){
    $(this).find('img').attr('src','img/img1.png');
})

$("p").mouseup(function(){
    $(this).find('img').attr('src','img/img2.png');
})

$("img").mousedown(function(){
    $(this).attr('src','img/img1.png');
})

$("img").mouseup(function(){
    $(this).attr('src','img/img2.png');
})

Answer 4

<script type="text/javascript">
    jQuery(document).ready(function () {
        var imgShow = 'img/show.png';
        var imgHide = 'img/hide.png';
        jQuery(".content").hide();
        //toggle the componenet with class msg_body
        jQuery(".heading").click(function () {
            jQuery(this).next(".content").slideToggle(500);
            if (JQuery(this).find("img").attr('src') == imgShow ) {
                JQuery(this).find("img").attr('src', imgHide);
            } else {
                JQuery(this).find("img").attr('src',imgShow);
            }
        });
      });
</script>