如何在特定范围内定位图像？

Question

我正在构建一个多项选择问卷,使用jQuery在悬停时切换单选按钮.我有一个范围用于每个可能的答案,而在里面我有单选按钮,我想在悬停时交换源.

现在这些是我制作的图像,而不是实际的单选按钮.我有两个图像,已检查和未选中,并且当用户盘旋时我正在交换src.

因此,当用户将鼠标悬停在单选按钮本身或单选按钮旁边的实际文本上时,按钮会显示一个点.

这是我的跨度,包含单选按钮和文本(请记住我有5个这样的).

<span class='choice' id='A'><img src="images/radioUnchecked.png" width="20" height="21" class='radioButton'>A) Naked woman</span>

那么当用户将鼠标悬停在文本上时,如何使用jQuery来定位单选按钮？

编辑:这是我的jQuery的是使用切换,但只有当用户将鼠标悬停在形象工程.

$('img.radioButton').hover(function () {
    this.src = 'images/radioChecked.png';
}, function () {
    this.src = 'images/radioUnchecked.png';
});

Answer 1

$('span.choice').hover(function() {
   $('img.radioButton', this).attr('src', 'images/radioChecked.png')
}, function() {
   $('img.radioButton', this).attr('src', 'images/radioUnchecked.png')
});

如果你有更多的元素与类,choice那么你可以尝试以下:

$('span.choice').has('img.radioButton').hover(function() {
   $('img.radioButton', this).attr('src', 'images/radioChecked.png')
}, function() {
   $('img.radioButton', this).attr('src', 'images/radioUnchecked.png')
});

$('span.choice').has('img.radioButton')将只检测包含的跨度img.radioButton.