Jquery - как настроить таргетинг только на элементы в том же родительском элементе div, что и кнопка, вызывающая событие - PullRequest
Новая
       32

Jquery - как настроить таргетинг только на элементы в том же родительском элементе div, что и кнопка, вызывающая событие

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

Только начал изучать Jquery - вот моя проблема:

У меня есть шесть делений на странице.Каждый div содержит ссылку с классом .arrow_trigger и изображение с классом .arrow_tip.Вот HTML. 

                    <div class="sixbox">

                    <img src="images/photos/box_6.jpg" width="280" height="180" alt="don´t stay in" class="leather_border">
                    <div class="wrap_arrow"><a href="what_we_do.html#report_design" class="arrow_trigger"><h2>Reports</h2></a></div> 
                    <img src="images/buttons/blue_arrow_tip.png" width="41" height="47" alt="arrow_tip" class="arrow_tip">                                      
                      <ul>
                        <li>Company reports</li>
                        <li>Datasheets</li>                    
                        <li>Corporate style development</li>                    
                        <li>Printed and delivered</li>                  
                      </ul>

                </div><!-- end sixbox -->

Мне нужен каждый .arrow_trigger для анимации .arrow_tip, содержащегося в том же div.Я получил эффект с помощью следующего кода: 

<script type="text/javascript">
$(document).ready(function() {
    $('.arrow_trigger').hover(function() {

                $(".arrow_tip").stop().animate({left:'190px'}, {queue:false,duration:200});
        },  
        function() {
                $(".arrow_tip").stop().animate({left: '184px'}, {queue: false, duration:200});
        });     
    });
</script>

Однако - с этим кодом все .arrow_tips нацелены вместо одного в том же родительском div, что и .arrow_trigger.

Любая помощь с благодарностью!

Ответы [ 2 ]

1 голос
/ 27 апреля 2011

используйте это> 

$(document).ready(function() {
    $('.arrow_trigger').hover(function() {

                $(this).parent().next(".arrow_tip").stop().animate({left:'190px'}, {queue:false,duration:200});
        },  
        function() {
                $(this).parent().next(".arrow_tip").stop().animate({left: '184px'}, {queue: false, duration:200});
        });     
    });

РЕДАКТИРОВАТЬ: Код исправлен. Проверьте рабочий образец> http://jsfiddle.net/unHXg/1/

0 голосов
/ 03 марта 2014

хорошо, я думаю, так как вы нацелены на одноуровневое .arrow_trigger, next () не будет моим лучшим вариантом.

я бы использовал jquery> 1.8 

//document on works on also ajax loaded content
$(document).on('hover','.arrow_trigger',function(){

  $(this).siblings('.arrow_tip').animate({left:'190px'}, {queue:false,duration:200});
  //or any other function i want to do with .arrow_tip

});

если он не является прямым братом .arrow_trigger, тогда можно использовать .find () 

//document on works on also ajax loaded content
$(document).on('hover','.arrow_trigger',function(){

  $(this).closest('.sandbox').find('.arrow_tip').animate({left:'190px'}, {queue:false,duration:200});
  //or any other function i want to do with .arrow_tip

});

это даст вам более гибкий способ выбора при поиске всех элементов родительского .sandbox независимо от местоположения arrow_tip или arrow_trigger.

...