jquerychangedivhtmlonmouseover和onmouseout

我要找的是：

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

我有一个部门：

<div class='headerOwner'>Owner

所有者

我希望div的文本更改为：

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

ASC | DESC |无

当用户将鼠标悬停在div上时，然后在用户离开div时更改回所有者

我正在做的是从HTMLdiv调用一个函数，并将类名传递给该函数，这样所有的执行都可以根据您悬停在哪个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>

功能排序显示（x）
{
var headText=$（“+x）.html（）；
$（“+x）.html（“|”）；
}
功能sortHide（y）
{
$（“+y）.html（headText）；
}
身份证件
所有者
队列
主题
类型
产品
主办
电子邮件

---

谢谢你的帮助。

这里有一把小提琴可以帮你。

您可以向按钮添加ID，并通过javascript中的Jquery添加侦听器

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

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

---

这里有一把小提琴帮助你。

您可以向按钮添加ID，并通过javascript中的Jquery添加侦听器

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

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

我注意到一件事

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

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

我注意到一件事

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

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

---

既然您使用的是jQuery，为什么不这样做呢

jQuery：

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

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

var-orig；
$（'div'）。悬停（函数（）{
orig=$（this.html（）；
$（this.html（“| | None”）；
}，函数（）{
$（this.html（orig）；
});​
既然您使用的是jQuery，为什么不这样做呢

jQuery：

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

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

var-orig；
$（'div'）。悬停（函数（）{
orig=$（this.html（）；
$（this.html（“| | None”）；
}，函数（）{
$（this.html（orig）；
});​
因为您使用的是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。
由于您使用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。
因为您使用的是jQuery，所以可以使用
.hover
函数，如下所示


$（文档）.ready（函数（）{
var headText=''；
$（'.headerID'）.hover（函数（）{
headText=$（this.html（）；
$（this.html（“|”）；
}，函数（）{
$（this.html（headText）；
});    
});
因为您使用的是jQuery，所以可以使用如下所示的
.hover
函数


$（文档）.ready（函数（）{
var headText=''；
$（'.headerID'）.hover（函数（）{
headText=$（this.html（）；
$（this.html（“|”）；
}，函数（）{
$（this.html（headText）；
});    
});
尝试删除
var
之前的
headText
。尝试删除
var
之前的
headText
。感谢演示如何选择具有类似类名的类感谢演示如何选择具有类似类名的类我正在计算所有内容，甚至变量都必须包装在函数或文档中功能。感谢您向我展示了函数可以在jqueryI中的函数之外浮动。我正在计算所有的事情，甚至变量都必须包装在函数或文档就绪函数中。感谢您向我展示函数可以在jquery中的函数之外浮动这是最直接的答案。谢谢你告诉我正确的方法来使用我设定要使用的技术。你能解释一下鼠标是如何被识别出来的吗？在$（'.headerID'）.hover（function（）{…}之后，我看到function（）{…}这只是说如果不悬停就执行此操作的一种固定方式吗？@knittledan hover函数接受2个参数，
.hover（function（）{…}，function（）{…}）；
->第一个函数是
mousein
处理程序，第二个函数是
mouseout
处理程序。这是最直截了当的答案。感谢您向我展示了使用我设定使用的技术进行此操作的正确方法。您能解释如何识别鼠标出吗？在$（'.headerID'）之后。悬停（函数（）{…}我看到function（）{..}这只是一种固定的说法吗？@knittledan hover函数接受两个参数，
.hover（function（）{..}，function（）{..}）；
->第一个函数是
mousein
处理程序，第二个函数是
mouseout
处理程序。