jquery 更改 div html onmouseover 和 onmouseout答案

【问题标题】：jquery change div html onmouseover and onmouseoutjquery 更改 div html onmouseover 和 onmouseout
【发布时间】：2012-03-31 04:43:08
【问题描述】：

我在寻找什么：

我有许多用于标记列的 div。当用户将鼠标悬停在 div 上时，我想将 div 的文本从其原始文本更改为排序选项，例如 (ASC | DESC | None)，然后当用户离开 div 时将其更改回其原始标题。我想创建可以从 div 本身调用的函数，以便我可以重用所有列标题 div 的代码。

我有一个 div：

<div class='headerOwner'>Owner

我希望 div 的文本变成：

<div class='headerOwner'>ASC | DESC | None

当用户将鼠标悬停在 div 上，然后在用户离开 div 时变回 Owner

我正在做的是从 html div 调用一个函数并将类名传递给该函数，因此所有执行都可以根据您悬停在哪个 div 上进行。然后，当用户离开 div 时，它会返回其原始文本。我显然做错了。有人可以清楚地解释要做到这一点的步骤，以便正确地发生。我是一名 python 和 php 程序员，所以我了解代码。但是 jquery 似乎让我大吃一惊。

<script type="text/javascript">

function sortShow(x)
{
var headText = $("."+x).html();
    $("."+x).html('<a href="#">ASD</a> | <a href="#">DESC</a>');
}
function sortHide(y)
{
    $("."+y).html(headText);
}

</script>

<div class='headerID' onmouseover='sortShow($(this).attr("class"))' onmouseout='sortHide($(this).attr("class"))'>ID</div>
<div class='headerOwner'>Owner</div>
<div class='headerQueue'>Queue</div>
<div class='headerSubject'>Subject</div>
<div class='headerType'>Type</div>
<div class='headerProduct'>Product</div>
<div class='headerHost'>Host</div>
<div class='headerEmail'>Email</div>

感谢您的帮助。

【问题讨论】：

尝试在headText之前删除var。

标签： jquery html mouseevent

【解决方案1】：

既然你在使用jQuery，为什么不这样做jsFiddle example？

jQuery:

var orig;
$('div').hover(function() {
    orig = $(this).html();
    $(this).html('<a href="#">ASD</a> | <a href="#">DESC</a> | None');

}, function() {
    $(this).html(orig);
});

【讨论】：

【解决方案2】：

由于您使用的是 jQuery，您可以使用如下.hover 函数，

DEMO

$(document).ready (function () {
    var headText = '';
    $('.headerID').hover(function() {
        headText = $(this).html();
        $(this).html('<a href="#">ASD</a> | <a href="#">DESC</a>');
    }, function() {
        $(this).html(headText);
    });    
});

【讨论】：

这是最直接的答案。感谢您向我展示了使用我打算使用的技术的正确方法。
您能解释一下鼠标移出是如何识别的吗？在 $('.headerID').hover(function() {...} 我看到 function(){ .. } 这只是一种固定的说法，如果不悬停就这样做吗？
@knittledan hover 函数需要 2 个参数，.hover(function() {...}, function() {...}); -> 第一个函数是 mousein 处理程序，第二个函数是 mouseout 处理程序。

【解决方案3】：

由于您使用的是 jQuery，因此您可以对其进行设置，以便在 javascript 中获取它们而无需进入 html。

类似：

$(document).ready(function(){
    $("div[class*=header]").hover(
        function(){
            //function when hovering, change $(this).html
        },
        function(){
            //function on mouse leaving, change $(this).html again
        }
    );
});

如果你给每个 div 一个 id，你可以在鼠标移出时将 div 的 html 重置为那个 id。

【讨论】：

感谢您展示如何选择具有相似类名的类

【解决方案4】：

这是一个可以帮助你的小提琴。 http://jsfiddle.net/hRLtM/1/

您可以为按钮添加一个 ID，并在您的 javascript 中通过 Jquery 添加侦听器。

$('[id]').mouseenter(function(){
  //perform hover function
});

$('[id]').mouseout(function(){
  //revert from hover
});

【讨论】：

【解决方案5】：

我注意到了一件事。

在函数 sortShow 之外声明 headText，现在它对函数 sortHide 是隐藏的。在 sortShow 之外声明时，它对 sortHide 可见。

var headText;
function sortShow(x)
{
   headText = ...

【讨论】：

我在想所有东西，甚至变量都必须包装在一个函数或一个文档就绪函数中。感谢您向我展示函数可以浮动在 jquery 函数之外