在currentTarget上選擇元素

我知道這很容易，但我無法弄清楚！在currentTarget上選擇元素

<ul class="footer_nav"> 
    <span class='footer_header'>01</span> 
    <li><a href="#">1</a></li> 
    <li><a href="#">2</a></li> 
    <li><a href="#">3</a></li> 
    <li><a href="#">4</a></li> 
    <li><a href="#">5</a></li> 
</ul> 

<ul class="footer_nav"> 
    <span class='footer_header'>01</span> 
    <li><a href="#">1</a></li> 
    <li><a href="#">2</a></li> 
    <li><a href="#">3</a></li> 
    <li><a href="#">4</a></li> 
    <li><a href="#">5</a></li> 
</ul>

我有上面的HTML。我想要做的是在li.a上發生懸停事件時，我更改了.span的CSS值，但只在currentTarget中更改。

我使用

e.currentTarget

但是使用這個你怎麼選擇當前UL內的另一個元素可以更新，但只能在當前UL不是所有的跨度

Here is my current coffeescript... 

    $('ul.footer_nav').hover (e) -> 
    changeFooterHover(e) 


##functions 
    changeFooterHover = (e) -> 
    span = e.currentTarget.parentNode.getElementsByTagName('span') 
    span.toggleClass("selected");

與錯誤

Uncaught TypeError: Object #<NodeList> has no method 'toggleClass'

來源

2012-10-19 Charlie Davies

你也可以發佈js嗎？ –

你是什麼意思？「當懸停事件發生在li.a上時，我改變了.span的CSS值，但只在currentTarget中」。如果你想在'ul'中獲得一個不同的元素，那麼你可以使用'e.currentTarget.parentNode'來獲得'ul'元素，然後使用諸如'getElementsByTagName'之類的東西。這取決於你想要什麼以及你已經在做什麼。發佈一些Javascript代碼！ – Ian

appologies我已經添加了一些代碼，請你可以不要投我的帖子 –

你可以找到span：

var elem = document.getElementsByClassName('footer_header')[0];

...或使用jQuery：

var elem = $(this).closest('ul').find('.footer_header');

來源

2012-10-19 13:27:37 micadelli

如果您正在使用jQuery，那麼你可以像下面：

$("ul li a").mouseenter(function(e){ 
    var anchorElt = $(this); 
    anchorElt.parent().parent().find("span").text(anchorElt.text()); 
});

這是ofcourse如果你有多個UL如果不是，那麼你可以從你的ul元素中找到span並改變它的值。

來源

2012-10-19 13:28:03 omerkirk

你需要這個：

這將幫助你停止對外部元素冒泡事件。

http://api.jquery.com/event.stopPropagation/

來源

2012-10-19 13:28:14 Ashirvad

-1

您可以使用.closest（）函數得到你想要的UL元素。

$('li a').hover(function() { 
     $(this).closest('ul').find('span').html('over'); 
    }, 
    function() { 
     $(this).closest('ul').find('span').html('out'); 
    });

上面的東西可能會幫助你走上正確的軌道。

來源

2012-10-19 13:33:24 andrux

爲什麼downvote？你**可以**使用_.closest（）_函數，並執行開始時提問的內容。 – andrux

在currentTarget上選擇元素

回答

相關問題