javascript - 如何交换图像

Question

有没有一种方法可以在用户单击链接以展开其上的内容时交换图像。

<ul class="accor">
    <li> Item 1 <img src="../plus.png">
      <p> Lorem ipsum dolor sit amet</p>
    </li>
</ul>

$('.accor li').click(function() { 
    $(this).find('p').slideToggle('fast');
})

Answer 1

您可以更改图像的 src 属性值。或者您可以将这些图像显示为背景。然后您可以通过更改类别来切换这些图像。

您可以按如下方式更改 src 属性的值；

$('img').attr('src', 'newImageUrl');

否则，您可以将它们设为背景图像，如下所示；

样式；

.icon {
  display: inline-block;
}

.first-image {
  background: url('../plus.png');
  width: 20px;
  height: 20px;
}

.second-image {
  background: url('../image-2.png');
  width: 20px;
  height: 20px;
}

顺便说一句；您需要通过图像更新这些类的高度和宽度值。

html;

<ul class="accor">
    <li> Item 1 <span class="icon first-image"></span>
      <p> Lorem ipsum dolor sit amet</p>
    </li>
</ul>

对于最后一个解决方案，您需要使用 javascript 更改类；

$('.accor li').click(function() { 
  var $icon = $(this).find('.icon');

  if ($icon.hasClass('first-image') {
    $icon.removeClass('first-image').addClass('second-image');
  } else {
    $icon.removeClass('second-image').addClass('first-image');
  }

  $(this).find('p').slideToggle('fast');
});

我希望这能奏效。