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

Я имеющий img внутри <p> тег и если я click в img или <p> он должен быть toggled и IMG должен changed.переключения изображения с помощью JQuery

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

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

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

источник

2012-01-12 coder

это нормально, если вы измените изображение как фоновое изображение .heading? , так что вы можете играть в .heading и .heading.hide и просто toggleClass – bondythegreat

@ bondythegreat-Да, я пробовал это раньше, но он доцент выглядит так хорошо, как поля являются проблемой для него и неспособны установить для этого. – coder

вы можете установить ширину и высоту контейнера в .heading и просто немного поиграть с фоновой позицией в css .. это всего лишь мои 2 цента. – bondythegreat

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

источник

2012-01-12 10:38:41

@ JonathonBolster-Большое спасибо за быстрый ответ, и это то, что мне нужно, но agin, когда я переключаю его, img не меняется, так как мне нужно его заменить. – coder

@ Киран Извините, я пропустил этот бит! Пожалуйста, взгляните на мое редактирование (и jsFiddle) –

@ JonathonBolster. Нет проблем, и я посмотрел на вашу скрипку, и он просто вырезал слайды и менял img, но если снова я нажму заголовок, img должен измениться. – coder

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

Просто измените линию

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

источник

2012-01-12 10:40:23 Simon

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

источник

2012-01-12 10:40:44 Dau

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

источник

2012-01-12 10:53:26 bondythegreat

@ bondythegreat - это не изменение img. – coder

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

ответ

Смежные вопросы