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

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跨度。