Question

我知道这很容易，但我无法理解！

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

Answer 1

如果您正在使用jQuery，那么您可以执行以下操作：

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

如果您的html中有多个ul元素，那么这是当然的，那么您可以从ul元素中找到范围并更改值。

Answer 2

你可以找到范围：

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

...或者使用jQuery：

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

Answer 3

你需要这个：

这将帮助您阻止外部元素上的冒泡事件。

<强> http://api.jquery.com/event.stopPropagation/

Answer 4

您可以使用 .closest（）函数来获取所需的UL元素。

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

上述内容可能会帮助您走上正确的轨道。

在currentTarget上选择元素

4 个答案: