Question

我使用jQuery有一系列链接的翻转图像。单击链接后，我希望翻转图像将其类别从“翻转”更改为“翻转2”，以便获得一组不同的图像。这是翻转图像的jQuery：

$(document).ready(function() {
$("img.rollover").hover( 
function() { this.src = this.src.replace("_off", "_on"); 
}, 
function() { this.src = this.src.replace("_on", "_off"); 
});
$("img.rollover2").hover( 
function() { this.src = this.src.replace("_off2", "_on2"); 
}, 
function() { this.src = this.src.replace("_on2", "_off2"); 
});
});

以下是链接图片的代码：

<a href="Mod1/index.html" target="_blank">
<img src="images/watch_off.png" class="rollover" />
</a>

初始翻转效果很好，但我尝试使用here中的访问链接插件来触发任何链接图像的类名更改为'rollover2'：

<script src="js/jquery.visited.js"  type="text/javascript"></script>
<script type="text/javascript">
$('#links a').visited(function () {
  // hides the li element
  $(this).img.removeClass("rollover");
  $(this).img.addClass("rollover2");
});
</script>

这似乎不起作用。你们中的任何人都可以帮我解决这个问题吗？

Answer 1

你可以使用find()方法，试试这个：

$('#links a').visited(function () {
  $(this).find('img').removeClass("rollover");
  $(this).find('img').addClass("rollover2");
});

Answer 2

这应该有效，

$(this).find('img').removeClass("rollover");
$(this).find('img').addClass("rollover2");

或更好，

 $(this).find('img').removeClass("rollover").addClass('rollover2');

如果使用jQuery访问了链接图像，则更改它的类

2 个答案: