Question

我在寻找：

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

我有一个div：

<div class='headerOwner'>Owner

我希望div的文字改为：

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

当用户将鼠标悬停在div上时，当用户离开div

时，请更改回“所有者”

我正在做的是从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>

感谢您的帮助。

Answer 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);
});

Answer 2

由于您正在使用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。

Answer 3

由于您使用的是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);
    });    
});

Answer 4

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

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

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

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

Answer 5

我注意到了一件事。

在函数sortShow之外声明headText，现在它对sortHide函数隐藏了。当在sortShow之外声明时，它将在sortHide中可见。

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

jquery更改div html onmouseover和onmouseout

5 个答案: