jquery изменить div html onmouseover и onmouseout

Question

Что я ищу:

У меня есть несколько div, которые используются для обозначения столбцов.Я хочу изменить текст div по сравнению с его исходным текстом, чтобы сортировать такие параметры, как (ASC | DESC | None), когда пользователь наводит курсор на div, а затем, когда пользователь покидает div, меняет его на исходный заголовок.Я хочу создать функции, которые можно вызывать из самого div, чтобы я мог повторно использовать код для всех div заголовков столбцов.

У меня есть div:

<div class='headerOwner'>Owner

Я хочу текстэлемента div для изменения в:

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

Когда пользователь наводит курсор на элемент div, затем переключается обратно на Owner, когда пользователь покидает элемент 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 пример ?

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, вы можете использовать функцию .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 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, затем вы можете сбросить HTML-код div до этого идентификатора при наведении мыши.

Answer 4

Я заметил одну вещь.

Объявите headText вне функции sortShow, сейчас он скрыт от функции sortHide.Это будет видно для sortHide при объявлении вне sortShow.

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

Answer 5

Вот скрипка, чтобы помочь вам. http://jsfiddle.net/hRLtM/1/

Вы можете добавить идентификатор к кнопке и добавить слушателя через Jquery в вашем JavaScript.

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

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