Question

我有这段代码：

$('#sh1').hover(function(){$('#tip1').toggle()});
$('#sh2').hover(function(){$('#tip2').toggle()});
$('#sh3').hover(function(){$('#tip3').toggle()});
$('#sh4').hover(function(){$('#tip4').toggle()});

等

元素数量可以是30-40。显然这不是做这种事情的正确方法。但是我该怎么做呢？使用“for”循环或“if”条件或正则表达式还是什么？

标记将如下：

<div>
    <div id="sh1"></div>
    <div id="sh2"></div>
    <div id="sh3"></div>
    <div id="sh4"></div>
</div>
<div class="tip" id="tip1">text</div>
<div class="tip" id="tip2">text</div>
<div class="tip" id="tip3">text</div>
<div class="tip" id="tip4">text</div>

Answer 1

Working jsFiddle Demo

你可以使用经典的for循环，这是另一个简单的解决方案：

$(function () {
    $('[id^="sh"]').hover(function () {
        var index = $(this).attr('id').replace('sh', '');
        $('[id="tip' + index + '"]').toggle();
    });
});

Answer 2

使用属性选择器（即 Attribute Starts With Selector [name^="value"] ），即可实现

实施例

假设sh和tip是div的

$('div[id^="sh"]').hover(function(){$('div[id^="tip"]').toggle()});

更新

$('div[id^="sh"]').hover(function() {
    var id = $(this).attr("id");
    id = parseInt(/\d+/.exec(id), 10);
    $("#tip"+id).toggle();
});

参考 LIVE DEMO

Answer 3

为要循环的每个元素添加一个类并添加：

$(".YourClass").).hover(function(){$(this).toggle();});

Answer 4

您可以为要触发的每个元素放置一个类，并将其用作选择器：

这样的事情：

$('.YourClass').hover(function(){$(this).toggle()});

希望这会有所帮助。问候。

Answer 5

如果所有这些元素都位于一个父元素中，则使用委托事件。您可以将该悬停事件绑定到父级。
使用类来引用元素。请将#sh1,#sh2,etc与一个.sh和#tip1,#tip2,etc与名为.tip的类一起引用。
如果tip组位于sh组内，请使用jquery的遍历技术导航到该元素。

除了关于性能的优化之外，还可以仅取决于标记。

如何优化此jQuery代码以匹配ID

5 个答案:

实施例

更新