jQuery 停止从 ID 到 Class 的工作变化？

Posted 2023-05-09

【中文标题】jQuery 停止从 ID 到 Class 的工作变化？

【英文标题】：jQuery Stops Working Change from ID to Class?

【发布时间】：2015-02-25 21:44:31

【问题描述】：

我想在表中的多个框上使用 jQuery mouseenter/mouseleave，因此我决定将 id 更改为类（只需将 js 文件和 html 文件中的 # 切换为 .），如下所述。它停止工作了！

然后我尝试使用 $(document).on('.class', 和最近的 $(".class").live，基于我在 *** 中找到的不同线程 - 这也不起作用，所以我将代码恢复为我原来的修改 - 见下文。

我对此很陌生，所以我可能遗漏了一些明显的东西，但到目前为止我还没有找到解决方案。

HTML 文件

    <div class="col-sm-3">
        <div class="hover">
            <div class="list-group">

                <a class="list-group-item">
              <span class="text-success"></span><div class="hide">One</div><div class="show">hi</div></a>

            </div>
        </div>
    </div>

JS 文件

//Hides detail initially
$(".show").hide();
//Shows added detail upon hover and gets rid of title
$(".hover").mouseenter(function() 
    $(".show").show();
    $(".hide").hide();
)
//Returns to normal on mouseoff
$(".hover").mouseleave(function() 
    $(".show").hide();
    $(".hide").show();
)

编辑

这是我的错，我在我的 HTML 文件中以错误的顺序导入了 javascript 文件！

【问题讨论】：

为我工作：jsfiddle.net/3joyzqmf

请向我们展示损坏的代码。您在上面发布的内容运行良好。

应该在文档中（准备好）还是窗口中（加载）？

DOM 就绪对于大多数 jQuery 代码来说通常是最可靠的。

感谢您的快速回复

【参考方案1】：

（表格中的多个框）表示您需要使用 $(this)

$(document).ready(function()
  $(".show").hide();
    //Shows added detail upon hover and gets rid of title
    $(".hover").on('mouseenter',function() 
        $(this).find(".show").show();
        $(this).find(".hide").hide();
    ).on('mouseleave',function() 
        $(this).find(".show").hide();
        $(this).find(".hide").show();
    );  
);

查看演示Live Demo

【讨论】：

它不应该像现场演示，但最好在文档准备好之后再做......我会更新我的答案

@user3190635 答案更新了新代码和演示 .. 此代码比以前的代码更专业