Question

我需要通过点击父标签来切换两个图像。

这是我的JavaScript

$("#VerColMenu > li > a").click(function() {
    var src = ($(this).children()[0].attr('src') === 'img/plus.png')
    ? 'img/minus.png'
    : 'img/plus.png';
   $(this).children()[0].attr('src', src);
});

但这里没有任何事情发生。

Answer 1

attr是一种jQuery方法，而不是DOM方法，因此您不需要[0]。试试这个：

$('#VerColMenu a').click(function(){
  var $img = $(this).children();
  var src = $img.attr('src');
  $img.attr('src', src === 'img/plus.png' ? 'img/minus.png' : 'img/plus.png');
});

Answer 2

首先.children()[0]
获取子对象作为DOM对象而不是jQuery对象..

.attr（）只能用于jQuery对象..

尝试：eq 选择器而不是 .children（）

 $("#VerColMenu > li > a").click(function() {
      var src = ($(this).find('img:eq(0)').attr('src') === 'img/plus.png')
    ? 'img/minus.png'
    : 'img/plus.png';
   $(this).find('img:eq(0)') .attr('src', src);
});

我假设.children()[0]你的意思是li里面的第一张图片，所以使用img:eq(0)选择里面的第一个图像元素..

Answer 3

将[0]附加到jQuery对象将检索底层DOM对象。除了上面/下面的答案，您还可以使用.first()来获取jQuery数组集中的第一个元素：

$("#VerColMenu > li > a").click(function() {
    var src = ($(this).children().first().attr('src') === 'img/plus.png') ? 'img/minus.png' : 'img/plus.png';
    $(this).children().first().attr('src', src);
});

DEMO

这当然必须包含在$(document).ready()或类似内容中。

Answer 4

使用此代码可以帮助您

 function toggle(a) {
        if (isloaded) {
            document.getElementById(a).src=toggleimage[i_image];
        }
        i_image++
        if (i_image>1) {i_image=0}
    }

 <a href="javascript:toggle()"><img name="togglepicture" src="p1.gif" border="0"></a>

单击父元素时如何切换两个图像？

4 个答案: