*[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

Используйте регулярное выражение или функцию разделения JavaScript, чтобы разделить идентификатор на две части, и таким образом получить идентификатор

как, например, в моем коде я использую

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

Answer 2

Извлечь идентификатор из объекта триггера и использовать этот идентификатор, чтобы найти объект панели.

$('*[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;
  }
});

Answer 3

Если я понимаю ваши требования, вы бы хотели показать ближайшую панель к сработавшему триггеру. использование .closest() за это.

Изменить это:

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

К этому:

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

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