0

我知道这很容易，但我想不通！

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

4 回答 4

1

如果您使用的是 jQuery，那么您可以这样做：

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

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

于 2012-10-19T13:28:03.390 回答
0

你可以找到跨度：

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

...或使用 jQuery：

var elem = $(this).closest('ul').find('.footer_header');
于 2012-10-19T13:27:37.757 回答
0

你需要这个：

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

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

于 2012-10-19T13:28:14.763 回答
-1

您可以使用.closest()函数来获取您想要的 UL 元素。

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

像上面这样的东西可能会帮助你走上正轨。

于 2012-10-19T13:33:24.933 回答