Question

我选择了一些带有结果的输入和每个的“idresult”。当鼠标悬停idresult = 1时，我想用jquery div 1显示，当鼠标悬停idresult = 2时，我想用div 2显示...并隐藏显示的最后一个div。有什么想法吗？

Html脚本：

<select id="myselect">
 <option idresult="1" value="Value test 1">TEST 1</option>
 <option idresult="2"  value="Value test 2">TEST 2</option>
 <option idresult="3"  value="Value test 3">TEST 3</option>
</select>

<div id="1" style="display:none;">Div with information for idresult=1</div>
<div id="2" style="display:none;">Div with information for idresult=2</div>
<div id="3" style="display:none;">Div with information for idresult=3</div>

Jquery脚本：

$('#myselect').on('mouseover', function () {
    var myidselect=$(this).attr("idresult");
    $(myidselect).show(); // display the div in relation with select result
});

Answer 1

首先，不要使用随机属性来混淆DOM，而是使用data-。

最后，你得到了字符串值，但从未将它作为有效选择器传递给Sizzle（jQuery的选择器引擎）。您需要在#前加上字符串，如下所示：

$('#myselect').on('mouseover', function () {
    var myidselect = $(this).children('option:selected').data("idresult");
    $('#'+myidselect).show().siblings('div').hide(); // display the div in relation with select result
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="myselect">
 <option data-idresult="1" value="Value test 1">TEST 1</option>
 <option data-idresult="2"  value="Value test 2">TEST 2</option>
 <option data-idresult="3"  value="Value test 3">TEST 3</option>
</select>

<div id="1" style="display:none;">Div with information for idresult=1</div>
<div id="2" style="display:none;">Div with information for idresult=2</div>
<div id="3" style="display:none;">Div with information for idresult=3</div>

请注意，我们需要使用$(this).children('option:selected').data("idresult")，因为data-属性已分配给<option>中的<select>元素。

另请注意，我们使用siblings('div').hide()隐藏了之前显示的<div>元素。但您可能希望使用类名或其他机制识别这些信息div，以获得更好的可移植性。

鼠标悬停结果从选择输入时显示div

1 个答案: