【问题标题】:Trigger mousevents in table (via parent) with jQuery?用jQuery触发表中的鼠标事件(通过父级)?
【发布时间】:2017-09-16 05:16:29
【问题描述】:

我有一个问题,我不明白:

我有一个表格,每个单元格都包含一个小的定义列表和一个锚点 所以它看起来像:

<table>
<tr>
    <td>
        <dl>
            <dt>Title</dt>
            <dd>Summary</dd>        
        </dl>
        <a>Link</a>
    <td>
</tr>
</table>

还有更多的行和列,但这应该足够了:-)

如果鼠标进入 dl 或者可能是 td,我想要显示隐藏的(使用 .hide()-Method)锚点。再加上隐藏所有其他包含在未“mouseenter”的 td's / dl's 中的锚点。

我尝试了以下功能:

(function(){
    $('td').on('mouseenter', 'dl', function(){
        ($(this)
            .next());
            .show();
            .slideDown(300)
                .siblings('a')
                    .slideUp(300);

    })  
})();

知道我做错了什么吗? 问题可能是,我在运行时创建了动态的表格内容(tr 和向下)吗? 我很高兴有任何建议。

【问题讨论】:

  • 那是你的javascript吗?它有一个错字,您应该使用 $(function ... 而不是 (function ...
  • 不一定。看起来他正在使用闭包......

标签: jquery events dynamic html-table


【解决方案1】:

这样的东西应该可以实现你想要的:

$(function() {  
    $('td').on('mouseenter', function() {  
        $(this).parents('table').find('a').slideUp(300);
        $(this).children('a').slideDown(300);
    });
});

在此处查看 jsFiddle > http://jsfiddle.net/WR45L/

【讨论】:

  • 也不起作用...我试图检查事件是否通过控制台上的输出触发...没有任何反应(使用mous输入-应该触发该功能并也写入控制台..没有任何反应)
  • hmz...在运行时构建表时我必须观察一些东西?
  • 感谢帮助...只需将 on(...) 替换为 live(...) 以处理动态创建的内容 - 感谢 @BenM 的建议 :-)
【解决方案2】:

使用:

$(this).parent().next().show().slideDown(300).siblings('a').slideUp(300);

【讨论】:

  • 只是为了一般理解:这里的兄弟姐妹只适用于同一个 td 中的锚点?
  • 是的,它们将匹配同一个 td 中的所有锚点,除了我们使用兄弟函数的那个​​。
【解决方案3】:

尝试使用我在下面修改过的 javascript。看起来代码对我来说是错误的。

(function(){
    $('td').on('mouseenter', 'dt', function(){
        $(this)
            .next()
                .slideDown(300)
            .parent('dl')
                .siblings('a')
                    .slideUp(300);

    })  
})();

【讨论】:

  • 嗯不,不工作o-O,我的错,不会听dt ...听dl...在代码中更改它,但没有更改o-O
  • 对您在这里想要实现的目标感到困惑。此代码将向上滑动&lt;a /&gt; 并向下滑动&lt;dd/&gt;,因为这看起来像是您试图定位的内容。如果您想在悬停的单元格中向下滑动锚点并在每个其他单元格中向上滑动,那么 @BenM 的解决方案将起作用。或者,您可以更改它,以便 mouseleave 事件触发 &lt;a /&gt; .slideup()
  • 我的目标是最后一个 :-) 当悬停在所属的 def 列表上时,向上滑动锚点,并将锚点隐藏在所有其他表格元素中,因为我的模棱两可的描述 =/
猜你喜欢
  • 2012-03-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-08-13
  • 1970-01-01
相关资源
最近更新 更多