* [id^=选择所有，我想选择每个相同的号码

Question

使用此代码，当您将鼠标悬停在id =“trigger *”的任何内容上时，它将显示id =“panel *”的所有内容会喜欢它，因为trigger1显示panel1，trigger2显示panel2。

这可能吗？这是我的代码：

$(document).ready(function(){ 
hovered = false; 

$('*[id^=trigger]').bind('mouseenter mouseleave', function(event) { 
switch(event.type) { 
    case 'mouseenter': 
     // when user enters the div 

     $('*[id^=panel]').show('fast'); 

    break; 
    case 'mouseleave': 
     // leaves 
     setTimeout(function(){ 
    if(!hovered) { 
     $('*[id^=panel]').hide('fast'); 
     }}, 250); 
    break; 
} 
}); 

$('*[id^=panel]').mouseover(function(){ 
hovered = true; 
}).mouseout(function(){ 
hovered = false; 
$('*[id^=trigger]').trigger("mouseout"); 
}); 

}); 

Answer 1

如果我了解您的要求，您希望显示触发器触发时最近的面板。为此使用.closest()。

更改此：

$('*[id^=panel]').show('fast'); 

向该：

$(this).closest('*[id^=panel]').show('fast'); 

http://api.jquery.com/closest/

Answer 2

使用正则表达式，或javascript 分割功能的id分成两个部分并这样获得编号

例如像在我的代码使用

var draggable_id = $(this).attr('id').split('button')[0]; 

Answer 3

提取物中的ID从触发对象，并使用该ID查找面板对象。

$('*[id^=trigger]').bind('mouseenter mouseleave', function(event) { 
    // extract id from trigger object 
    var id = this.id.substring(7); 
    switch(event.type) { 
    case 'mouseenter': 
    // when user enters the div 
    $('*[id^=panel'+id+']').show(); 
    break; 
    case 'mouseleave': 
    $('*[id^=panel'+id+']').hide(); 
    break; 
    } 
});