jQuery的 - 如何在同父的div元素仅作为目标触发事件的按钮

刚开始学习jQuery的 - 这里是我的问题：jQuery的 - 如何在同父的div元素仅作为目标触发事件的按钮

我有一个页面在六个div的。每个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动画包含在同一个div中的.arrow_tip。我已经来达到的效果与下面的代码：

<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。

任何帮助非常感谢！

来源

2011-04-27 nfrost21

使用本>

$(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/

来源

2011-04-27 11:47:49 neebz

感谢您的建议，但这并没有奏效。动画（适用于我原始代码中的all.arrowtips）不适用于任何。我也试过.closest而不是.next，但仍然没有成功。我使用Jquery 1.5以防万一。 – nfrost21 2011-04-27 12:09:34

@Nick Frost：代码固定在答案中。也添加了工作示例。 – neebz 2011-04-27 12:36:08

太棒了 - 你为我节省了一大笔头痛。非常感谢。 – nfrost21 2011-04-27 13:20:45

以及我认为，因为您的目标是。of .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直接sibbling然后使用.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的位置。

来源

2014-03-03 10:41:21 Zalaboza

jQuery的 - 如何在同父的div元素仅作为目标触发事件的按钮

回答

相关问题