Question

我想在href上使用鼠标悬停动态更改选择。

HTML：

<select name = "modifiers[11]" id = "selectImg" class = "selectImg">

<option value ="43" > Natural Black </option>
<option value="44"> Red   <!--(+$10.50)--></option>
<option value ="45" > Brown <!--(+$10.50)--></option>
<option value="46"> Green <!--(+$10.50)--></option>
<option value ="47" > Blue <!--(+$10.50)--></option>

</select>

<a id="18" href="#">link1</a>
<a id="19" href="#">link2</a>
<a id="20" href="#">link3</a>
<a id="21" href="#">link4</a>
<a id="22" href="#">link4</a>

Jquery：

$('#18 a').hover(function() {
    $('#43').attr('selected', 'selected');
});
$('#19 a').hover(function() {
    $('#44').attr('selected', 'selected');
});
$('#20 a').hover(function() {
    $('#45').attr('selected', 'selected');
});
$('#21 a').hover(function() {
    $('#46').attr('selected', 'selected');
});
$('#22 a').hover(function() {
    $('#47').attr('selected', 'selected');
});

这是我一直在努力的小提琴。 http://jsfiddle.net/NnEdM/3/

我做错了什么？

修改

我想补充一下，我找到了这个jsfiddle，它可以悬停，但我的值不是从1 http://jsfiddle.net/SEqZG/23/开始

Answer 1

<强> jsFiddle Demo

有些事情出了问题。首先，您应该使用prop而不是attr。其次，你没有在几个地方正确选择元素。 $('#22 a')将选择一个嵌套的锚标记，并且应该像这样定位实际锚点：$('#22')。此外，$('#47')会查找不存在的id元素，您应该在select元素下面找到值为47的选项，如下所示：$('#selectImg option[value=47]')。这是最终结果

$('#18').hover(function() {
 $('#selectImg option[value=43]').prop('selected', 'selected');
});
$('#19').hover(function() {
 $('#selectImg option[value=44]').prop('selected', 'selected');
});
$('#20').hover(function() {
 $('#selectImg option[value=45]').prop('selected', 'selected');
});
$('#21').hover(function() {
 $('#selectImg option[value=46]').prop('selected', 'selected');
});
$('#22').hover(function() {
 $('#selectImg option[value=47]').prop('selected', 'selected');
});

在href = jquery上使用鼠标悬停选择选择选项

1 个答案: