javascript - 用 jQuery 替换图像

Question

我在单击选项卡时遇到一些图像更改问题。

问题出在箭头图像上，目前它与 jQuery 一起出现，如下所示

$('.toggle_title').prepend('<img class="tab-open" src="my_url" />');

所以我需要的是，当选项卡打开时，图像将自身更改为“tab-close.png”(翻转箭头)。打开的选项卡有一个额外的类“.toggle_active”(之前的类 .toggle_title 仍然保留)。我已经尝试过类似的方法，但它不起作用，有人可以帮忙吗？

  if($('.toggle_title').hasClass('toggle-active')) {
    $('.toggle_active').prepend('<img class="tab-open" src="my_url" />')
  } 
  else {
    $('.toggle_title').prepend('<img class="tab-open" src="my_url" />')
  }

Answer 1

在字符串中使用 HTML 是一种反模式。首先创建一个图像元素:

// You should NOT hardcode this value, this must come from WordPress,
// but that's for a different topic. See `wp_localize_script` to learn more
// http://codex.wordpress.org/Function_Reference/wp_localize_script
var url = 'http://creativeagency.ee/holi/wp-content/themes/bones/library/images/'

var $img = $('<img>', {
  'class': 'tab-open',
  src: url +'tab-open.png'
})

下一步附加图像:

$('.toggle_title').prepend($img);

现在，由于您拥有对图像的引用，因此您可以在需要时轻松更改其 src 属性:

var $title = $('.toggle_title') // chache your elements!

if($title.hasClass('toggle_active')) { // typo!
  $img.attr('src', url +'tab-close.png')
} else {
  $img.attr('src', url +'tab-open.png')
}

这应该可以帮助您，尽管它仍然可能不是完美的抽象。您可能希望将可能的图像放入数组中，并以不同的方式切换它们:

var srcs = ['tab-close.png','tab-open.png']
$img.attr('src', url + srcs[+$title.is('.toggle_active')])

上面的代码与上面的代码相同，但更简洁，方法是将 bool 值转换为数字，并使用 is 而不是 hasClass。