0

jQueryを使用して、ホバー時にラジオボタンを切り替えて、多肢選択式アンケートを作成しています。可能な回答ごとにスパンがあり、その中にホバー時にソースを交換したいラジオボタンがあります。

これらは私が作成した画像であり、実際のラジオ ボタンではありません。チェックした画像とチェックしていない画像の 2 つがあり、ユーザーがホバーしたときに 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 に答える