переключить изображение с помощью jquery - PullRequest
Новая
       19

переключить изображение с помощью jquery

0 голосов
/ 12 января 2012

У меня есть img внутри <p> тега, и если я click img или <p>, он должен быть toggled, а img должен changed.

Я сделал это adding jQuery(this).attr("src", "img/hide.png");, но изображение не меняется, может кто-нибудь предложить мне правильный путь.

Вот мой сценарий: 

<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>

Это мой CSS: 

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

Это моя разметка: 

<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>

Ответы [ 4 ]

2 голосов
/ 12 января 2012

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

В этом контексте this будет ссылаться на .heading (тег p). Вам придется копать немного глубже, чтобы ссылаться на изображение:

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

Вот jsFiddle, чтобы показать:

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

Редактировать Я пропустил переключение содержания в вопросе.

Я добавил немного, чтобы он знал, что такое «активная» область содержимого. Затем при нажатии на изображение оно будет скрывать активную область содержимого и отображать текущее. Я также добавил немного, чтобы обработчик кликов не переключал контент, если он уже выбран. 

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");
    }
});
1 голос
/ 12 января 2012 
$("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');
})
1 голос
/ 12 января 2012

Включили ли вы строку jQuery(this).attr("src", "img/show.png") в обработчик кликов, определенный как jQuery(".heading").click()? В этом случае ваш код не может работать, потому что this относится к <p class="heading">, а не к изображению.

Просто измените строку на 

jQuery('img',this).attr("src", "img/show.png")
0 голосов
/ 12 января 2012 
<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>
...