0

我正在构建一个多项选择问卷,使用 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';
});
4

1 回答 1

5
$('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.

于 2012-05-30T17:56:17.883 回答