jQuery добавляет класс при наведении на другой div, если он содержит определенный текст (x100) - PullRequest
Новая
       48

jQuery добавляет класс при наведении на другой div, если он содержит определенный текст (x100)

1 голос
/ 09 августа 2011

По какой-то причине я просто не могу понять, как сказать jQuery посмотреть на каждый div в группе, а затем принять решение на основе только содержимого этого div.

У меня есть HTML вроде этого: 

<div id="maintable">
 <div class="elbox">
  content
  <div class="options">A,B,C</div>
 </div>
 <div class="elbox">
  content
  <div class="options">B,F</div>
 </div>
 <!-- and about a hundred more just like these -->)
</div>

<div id="menutable">
 <div class="optionA">A</div>
 <div class="optionB">B</div>
 <div class="optionC">C</div>
</div>

Я хочу создать функцию наведения, которая делает это:

  1. При наведении курсора на #menutable .optionA
  2. Скрипт сканирует все #maintable .options div для текстовой строки "A"
  3. Если в div.options обнаружена буква "A", ничего не происходит
  4. Если нет "A"находится в div.options, скрипт добавляет немного CSS к родительскому div (.elbox)
  5. Удалить новый класс при наведении мыши
  6. Сделать аналогично при наведении курсора на .optionB (ищите" B "") и .optionC (ищите" C ")

Пока у меня есть это: 

$('.menutable').hover(function() {
    $('.options').each(function(i) {
        if (!$(".options:contains('A')")) {
            $('.elbox').addClass('bgtransp');                  
        }
    });
});

Но это не работает.

Однако, если я переверну логику так, чтобы addClass происходил, если найдено "A" , класс применяется везде к каждому .elbox.Итак, я думаю, что мой сценарий мог бы на самом деле сказать: «если у любого .options div есть« A », то скрыть все .elbox.

Что я делаю не так? Это мой« каждый »?отсутствует родительский селектор? ... Или просто неправильный подход полностью?

С извинениями за мою нелюбовь (я над этим работаю), СПАСИБО!

Ответы [ 3 ]

3 голосов
/ 09 августа 2011 
$('#menutable div').hover(function() {
    var current = $(this);
    $('#maintable .options').each(function() {
        if (!$(this).is(":contains('" + current.text() + "')")) {
            $(this).closest('.elbox').addClass('bgtransp');                  
        }
    });
});

Также ваш селектор использует. когда это должно быть #

1 голос
/ 09 августа 2011

Это должно сработать: 

$('#menutable div').hover(function() {
    var that = this;
    $('#maintable .options').filter(function() {
        return $(this).text().indexOf($(that).text()) === -1;
    }).closest(".elbox").css("border", "1px solid red");
});

http://jsfiddle.net/zfPZS/1/

0 голосов
/ 09 августа 2011

см. Здесь http://jsfiddle.net/Kp39C/8/

Я думаю, возможно, вы не хотели искать A, когда меню находилось в режиме наведения, но искать в опциях, которые содержали значение, которое было внутри текущей ячейки.,поэтому вы должны применить обработчик события hover к более атомарному элементу.

Также вы пропустили '.'Селектор вместо «#», посмотрите на эту страницу для получения дополнительной информации по этому вопросу: http://www.w3.org/TR/css3-selectors/

Использование правильного селектора с функциями jquery для find () и has () может сделать вашу жизньнамного проще:) 

$('#menutable')
.find('div')
.hover(
  function() {
    var overMe=$(this);
      $(".options:contains('"+overMe.html()+"')").each(
      function() {
        $(this).addClass('bgtransp');
      }
    );
  }
);
...