JQuery - Выбрать все предметы с этим классом

0

Я пытаюсь сделать кусок кода повторно используемым в массовом масштабе без копирования/вставки и изменения определенного "класса" 350 раз.

Это нефункциональный код, который может дать представление о том, что я хотел бы сделать:

$(function(){ 
    var ClassName = $(this).attr('class');
    $(ClassName).each.hover(toggle); 
});
function toggle() {
   $(ClassName).toggleClass('hover');
}
$(function(){ 
    $(ClassName).mouseout(toggle); 
});
function toggle() {
   $(ClassName).toggleClass('hover');
}

Это рабочий код, но он работает только в классе SPECIFIC & GIVEN:

$(function(){ 
    $('.specific-class').hover(toggle); 
});
function toggle() {
   $(".specific-class").toggleClass('hover');
}
$(function(){ 
    $('.specific-class').mouseout(toggle); 
});
function toggle() {
   $(".specific-class").toggleClass('hover');
}

Если возможно - я хотел бы соответствовать только первому классу или быть в состоянии исключить класс из проверки соответствия. Половина элементов также будет иметь класс "ключ", а другая половина будет иметь "карту". Идея состоит в том, что когда вы наводите курсор на ключ или точку на карте, другой будет "загораться" с ним, чтобы облегчить его поиск.

Итак, учитывая четыре div, одна пара будет "div.spot1" с "div.spot1.key", а другая будет "div.spot2" с "div.spot2.key". ".key" необходимо исключить, иначе оба пятна в Легенде будут применены эффект зависания. Я хочу только совпадение для ".spot1" или ".spot2" для любого данного "пятна #",

Если это потребует дальнейшего уточнения, дайте мне знать. Это 2 утра, и я всю ночь пытался это решить.

  • 0
    У each должны быть круглые скобки: `$ (ClassName) .each (). Hover (toggle);`, но кроме этого, да, вы забыли период (ы), как показано в ответах. Кстати, у ваших элементов один класс или несколько?
Теги:

4 ответа

1

Как вы описали в вопросе: "it only works on a SPECIFIC & GIVEN class"

Это не ваша настоящая проблема, вы не используете class selector jquery для выбранного элемента:

Попробуйте: заменить $(ClassName) на $("." + ClassName)

Объяснение:

Ваш рабочий код:

$('.specific-class').hover(toggle); 
// ^
// Here you use class selector, so it working

Код не работает:

var ClassName = $(this).attr('class');
// "ClassName" It only contains the class name for example: "specific-class"

 $( ClassName).each.hover(toggle); 
// ^
// Here class selector is missing
1

изменить $(ClassName) с помощью $("."+ClassName);

 $(function(){ 
     var ClassName = $(this).attr('class');
      $("."+ClassName).each.hover(toggle); 
   });
  function toggle() {
           $("."+ClassName).toggleClass('hover');
   }
       $(function(){ 
      $("."+ClassName).mouseout(toggle); 
   });
  function toggle() {
           $("."+ClassName).toggleClass('hover');
   }
0

использование

$("." + ClassName)

внедрен

$(ClassName)

и вам не нужно дважды toogle функцию toogle.

Это исправленный код:

$(function(){ 
    var ClassName = $(this).attr('class');//i don't know which object you are pointing here
    alert(ClassName);//this will give you undefined 
    $(ClassName).each.hover(toggle); 
    $(ClassName).mouseout(toggle); 
});
function toggle() {
   $(ClassName).toggleClass('hover');
}
0

С помощью этого фрагмента вы можете выбрать первый класс, поэтому, если у вас есть несколько классов, как вы описали в своем вопросе, он вернет только первый класс в элементе (то есть: spot1)

var ClassName = $(this).attr("class").split(" ")[0];
  • 0
    Следуйте другим советам, приведенным в комментариях, attr () будет возвращать только имя класса, а не его селектор '.'

Ещё вопросы

Сообщество Overcoder
Наверх
Меню