1

我有这段代码：

$('#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>
4

5 回答 5

1

工作 jsFiddle 演示

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

$(function () {
    $('[id^="sh"]').hover(function () {
        var index = $(this).attr('id').replace('sh', '');
        $('[id="tip' + index + '"]').toggle();
    });
});
于 2013-05-29T12:55:40.217 回答
0

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

$(".YourClass").).hover(function(){$(this).toggle();});
于 2013-05-29T12:49:30.290 回答
0

使用属性选择器（即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();
});

参考现场演示

于 2013-05-29T12:48:21.027 回答
0

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

像这样的事情：

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

希望这可以帮助。问候。

于 2013-05-29T12:54:25.090 回答
0
  • 如果所有这些元素都位于一个父元素中，则使用委托事件。您可以将该悬停事件绑定到父级。
  • 使用类来引用元素。#sh1,#sh2,etc使用单个和.sh一个#tip1,#tip2,etc名为.tip.
  • 如果tip组位于sh组内，则使用 jquery 的遍历技术导航到该元素。

除了这种关于性能的优化之外，只能依赖于标记。

于 2013-05-29T12:56:21.373 回答