Jquery: изменение определенного класса при наведении курсора на другой элемент - PullRequest
Новая
       3

Jquery: изменение определенного класса при наведении курсора на другой элемент

0 голосов
/ 22 апреля 2011

Хорошо, у меня есть этот фрагмент HTML, он появляется несколько раз на странице, он всегда структурно одинаков, но ссылки и текст ссылки будут отличаться каждый раз вместе с текстом списка. 

<ul>
<li class="n1">Understand key issues relating to creating animations for interactive media products</li>
<li class="n2">Understand key contextual information relating to creating 2D animations for interactive media products</li>
<li class="n3">Be able to create 2D animations for use as part of an interactive media product</li>
<li class="n4">Be able to liaise with relevant parties</li>
<li class="n5">Be able to store 2D animations for use as part of an interactive media product</li>
</ul>
<hr />
<a href="alcohol_calculator.php" class="swfselector">
&raquo; Alcohol unit calculator prototype <img class="tab" src="/images/1.png" width="30" height="28" alt="1" /> <img class="tab" src="/images/2.png" width="30" height="28" alt="2" /><img class="tab" src="/images/3.png" width="30" height="28" alt="3" /> <img class="tab" src="/images/5.png" width="30" height="28" alt="5" />
</a>
<a href="bouncing_ball.php" class="swfselector">
&raquo; Bouncing ball animation <img class="tab" src="/images/3.png" width="30" height="28" alt="3" />
</a>
<a href="FOCC_mnemonic.php" class="swfselector">
&raquo; FOCC mnemonic <img class="tab" src="/images/1.png" width="30" height="28" alt="1" /> <img class="tab" src="/images/2.png" width="30" height="28" alt="2" /> <img class="tab" src="/images/3.png" width="30" height="28" alt="3" /> <img class="tab" src="/images/5.png" width="30" height="28" alt="5" />
</a>
<a href="information_literacy_quiz.php" class="swfselector">
&raquo; Information literacy quiz <img class="tab" src="/images/1.png" width="30" height="28" alt="1" /> <img class="tab" src="/images/2.png" width="30" height="28" alt="2" /> <img class="tab" src="/images/3.png" width="30" height="28" alt="3" /> <img class="tab" src="/images/5.png" width="30" height="28" alt="5" />
</a>
<a href="traffic_lights.php" class="swfselector">
&raquo; Traffic lights <img class="tab" src="/images/1.png" width="30" height="28" alt="1" /> <img class="tab" src="/images/2.png" width="30" height="28" alt="2" /> <img class="tab" src="/images/3.png" width="30" height="28" alt="3" /> <img class="tab" src="/images/5.png" width="30" height="28" alt="5" />
</a>

Я использую этот фрагмент Jquery для изменения изображений в каждой ссылке swfselector, когда они помещены поверх: 

    $(document).ready(function() {
 $('.swfselector').find('.tab').each(function() {
                $(this).attr("src", 
                $(this).attr("src").replace(".png", "o.png"));  
             })  
});
$('.swfselector').live('mouseover mouseout', function(event) {
  if (event.type == 'mouseover') {
            $(this).find('.tab').each(function() {
                $(this).attr("src", 
                $(this).attr("src").replace("o.png", ".png"));  

             })
   } else {
             $(this).find('.tab').each(function() {
                $(this).attr("src", 
                $(this).attr("src").replace(".png", "o.png"));  
             })
         }
    });

Пока все это работает ... но теперь у меня есть этот фрагмент Jquery, который также пытается изменить класс соответствующего

элемента выше. Так что если кто-то наводит курсор на SWF-селектор, содержащий изображения: 1.png, 3.png и 5.png. Элементы списка с классами: n1, n2 и n3 изменится на: n1o n3o и n5o. 
$(document).ready(function() {
 $('.swfselector').find('.tab').each(function() {
                $(this).attr("src", 
                $(this).attr("src").replace(".png", "o.png"));  
             })  
});
$('.swfselector').live('mouseover mouseout', function(event) {
  if (event.type == 'mouseover') {
            $(this).find('.tab').each(function() {
                $(this).attr("src", 
            $(this).attr("src").replace("o.png", ".png"));  
            var srcString =  $(this).attr("src").substr(0, $(this).attr("src").length - 4);
            nameString =  srcString.substr(8, srcString.length - 1);
            $(this).closest('ul').find('li').each(function() {
            var className = $(this).attr('class');
              if (nameString.indexOf(className)) {
                  $(this).removeClass(className).addClass(className + 'o');
                  }
                })
             })
   } else {
             $(this).find('.tab').each(function() {
                $(this).attr("src", 
                $(this).attr("src").replace(".png", "o.png"));  
             })
         }
    });

Приведенный выше код не возвращает ошибок, но не делает то, что я хочу, эфир.

1 Ответ

1 голос
/ 22 апреля 2011 
 $(this).closest('ul').find('li').each(function() {

$ (this), похоже, ссылается на «.swfselector», используя ближайший, вы ищете предков. Но UL не является предком «.swfselector»

EDIT:

Вместо $ (this) .closest ('ul') вы, вероятно, должны сделать: 

$('ul').find('li').each(function() {....

или даже лучше, дайте вашему 'ul' идентификатор 

$('#myUL').find('li').each(function() {
...