Question

我希望在切换时更改class="slide"内的图像。有几个这样的小部件，所以必须更改相关的小部件图像。

<div class="widget">
      <h3>Inhaltsverzeichnis</h3>
      <div class="widgetbox">
        <ul>
          <li><a href="#"> Prozessbeschreibung</a></li>
          <li><a href="#">Produkte & Dienstleistung </a></li>
          <li class="active"><a href="#">Beschaffen</a></li>
          <li><a href="#"> Prozess-Steckbrief</a></li>
          <li><a href="#"> Beschreibung</a></li>
          <li><a href="#"> Mitgeltende Dokumente</a></li>
          <li><a href="#"> Korrekturhinweise</a></li>
          <li><a href="#"> Optimierungsvorschläge</a></li>
          <li><a href="#"> Prozessübersicht</a></li>
        </ul>
      </div>
      <div class="slide"><img src="img/slideup.png" width="16" height="15" alt=""/</div>
    </div>

目前Js是

$(".slide").click(function(){
    $(this).prev().children().slideToggle("slow", function() { 

    });
});

现在，当隐藏ul时，如何将img slideup.png更改为slidedown.png，以下内容有效，但它会替换所有小部件中的所有图像。

  if ($('div.widgetbox>ul').css("display")=="none") {  
      $(".slide>a>img").attr("src", "img/slidedown.png");
  }
  else{ 
      $(".slide>a>img").attr("src", "img/slideup.png");
  }

Answer 1

您可以为img标记提供ID 例如：

<img src="flower.png" id="image"/>

然后

$(".slide").click(function(){
    $(this).prev().children().slideToggle("slow", function() { 
       $('#image').attr('src','sample.png');
    });});

Jquery幻灯片切换 - 如何在切换时更改图像？

1 个答案: