JQuery onclick目标（这li span）

Question

我有这个html:

<div id="homepage-side-nav">
    <ul class="nav">
        <li class="cell"><a href=""><img src="images/home-btn1.gif" alt="" /><span>Link </span></a></li>
        <li class="cell"><a href=""><img src="images/home-btn2.gif" alt="" /><span>Link </span></a></li>
    </ul>
</div>

我想定位我点击的 li 的跨度。

代码如下：

 $("#homepage-side-nav .cell").click(function(){

       $(this).animate({width:'225px'},200).css("background-color","#e5e6e7");

       $(this).mouseout(function() {

          $(this .span).hide();

        });

  });

这里有一个问题，我需要为 span 而不是我点击的 li 设置动画...我怎样才能正确处理？

Answer 1

您要转到特定项目：

$(this).find('span').animate({width:'225px'},200).css("background-color","#e5e6e7");

通过这种方式您可以获得 this 并转到内部元素 span。

文档：https://api.jquery.com/find/

Answer 2

试试这个。

HTML

<div id="homepage-side-nav">
    <ul class="nav">
        <li class="cell">
            <a href="#">
                <img src="images/home-btn1.gif" alt="" />
                <span>Link </span>
            </a>
        </li>
        <li class="cell">
            <a href="#">
                <img src="images/home-btn2.gif" alt="" />
                <span>Link </span>
            </a>
        </li>
    </ul>
</div>

JS

$("#homepage-side-nav .nav .cell").click(function(){
    $(this).find('a span').animate({width:'225px'},200).css("background-color","#e5e6e7");
    $(this).mouseout(function() {
        $(this).find('a span').hide();
    });
});

https://jsfiddle.net/4kfwha44/2/

关于您的原创 HTML/JS 的注意事项：
- 您拥有的第一个选择器 $("#homepage-side-nav .cell") 实际上并未正确附加点击事件，因为 cell class 不是 div 的子级ID 主页侧导航.

JQuery onclick目标（这li span）

JQuery onclick target (this li span)

jquery

onclick