Question

我的网站有一组元素，其中包含“element1”，“element2”，“element3”等类，以及包含类“1”，“2”，“3”的元素的另一组元素。这些在DOM中没有直接关系，所以我不能使用父/子选择器。

我想编写一个JQuery脚本，当用户在“element1”上悬停时，会在“1”中触发效果/功能。

当然，我不想手动编写所有配对。我怎么能写这个代码，以便选择器“检测”类名中的数字？我需要使用正则表达式吗？

如果需要，我可以更改我的HTML。

Answer 1

如果你只想使用一点代码来实现你应该做的所有元素：

$('.hover').hover(function() {
    var element = $(this).attr('class').replace(' hover', '');
    element = element.replace('element', '');
    $('.'+element).slideToggle();
});

您需要将类悬停添加到您希望它处理的所有元素，然后它将获取元素编号，并切换该元素。

这可能是HTML样本

<a href="#" class="element1 hover">Element 1</a><br/>
<a href="#" class="element2 hover">Element 2</a><br/>
<div class="1 hidden">You are hovering over element 1</div>
<div class="2 hidden">You are hovering over element 2</div>

请参阅here for a demo

以及评论demo here

Answer 2

如果您的所有ID都只是elementX，那么您可以使用不含正则表达式的String.prototype.replace来获取课程：

// `this` refers the DOM element in question
var class = this.id.replace('element', '');

Imo最好为您的元素提供不仅包含数字的类名。

最好的方法是将具有此类ID的所有元素都赋予类：

$('.someclass').hover(function() {
    $('.' + this.id.replace('element', '')).something();
});

Answer 3

您可以尝试

$("[id^='element']")..

或使用循环

for (i = 0; i < 10; i++) {
   $('element' + i)..
}

包含相同数字的类/ ids的JQuery选择器问题

3 个答案: