JQuery изменить ДИВО HTML OnMouseOver и onmouseout

Question

Я ищу:

У меня есть ряд дивы, которые используются для обозначения столбцов. Я хочу изменить текст 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, вы можете использовать .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 2

Вот скрипка, которая поможет вам. http://jsfiddle.net/hRLtM/1/

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

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

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

Answer 3

Одна вещь, которую я заметил.

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

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

Answer 4

Поскольку вы используете 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 5

Поскольку вы используете 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 
     } 
    ); 
}); 

Если вы даете каждый Див идентификатор, вы можете сбросить HTML из дел до этого идентификатор курсора мыши.