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')])

通过将布尔值转换为数字，然后使用is而不是hasClass，上述操作相同但有点麻烦。

用jQuery替换图像

1 个答案: