更改html元素懸停標記

Question

我有一個<div>完整的<ul>元素。當我將鼠標懸停在這些元素之一上時，我想對HTML標記進行調整。

我的標準<ul>項目是這樣的：

<ul> 
    <li class="category"><img src="source" /></li> 
    <li class="time days"><p>text</p></li> 
    <li class="participant participant_one"><p><img src="source" />text</p></li> 
    <li class="divider"><p>:</p></li> 
    <li class="participant participant_two"><p><img src="source" />text</p></li> 
    <li class="event_type"><p>Event</p></li> 
    <li class="event_name"><p>text</p></li> 
    <li class="hot"><p>945°</p></li> 
    <li class="rating"><p>4.99</p></li> 
    <li class="comments"><p>7.544</p></li> 
    <li class="marked"></li> 
</ul> 

現在懸停我希望這件看起來像這樣：

<ul class="expanded"> 
    <li class="category"><img src="img/headlines_category_icon_1.png"></li> 
    <li class="time days"><p>29.05</p></li> 
    <li class="icon participant_one_icon"><img src="img/user_icon_36-36_1.png"></li> 
    <li class="icon participant_two_icon"><img src="img/user_icon_36-36_1.png"></li> 
    <li class="headline"> 
     <ul> 
      <li class="participant participant_one"><p>Text</p></li> 
      <li><p>:</p></li> 
      <li class="participant participant_two"><p>Text</p></li> 
     </ul> 
     <p><span>Event</span> Eventname</p> 
    </li> 
    <li class="actions"> 
     <ul class="actions_ul"> 
      <li class="bookmark"><a href="#">Bookmark</a></li> 
      <li class="comment"><a href="#">Comment</a></li> 
      <li class="share"><a href="#">Share</a></li> 
     </ul> 
    </li> 
</ul> 

我想做到這一點使用jQuery和我嘗試以下操作：

$('div.match_entries ul').mouseenter(function() { 
    $(this).addClass('expanded'); 
    category = $(this).children('li.category'); 
    time = $(this).children('li.time'); 
    participant_one_original = $(this).children('li.participant_one'); 
    participant_one_icon = $(this).children('li.participant_one img'); 
    participant_one = $(this).children('li.participant_one').remove('img'); 
    participant_two_original = $(this).children('li.participant_two'); 
    participant_two_icon = $(this).children('li.participant_two img'); 
    participant_two = $(this).children('li.participant_two').remove('img'); 
    divider = $(this).children('li.divider'); 
    event_type_original = $(this).children('li.event_type'); 
    event_type = $(this).children('li.event_type p').text(); 
    event_name_original = $(this).children('li.event_name'); 
    event_name = $(this).children('li.event_name p').text(); 
    hot = $(this).children('li.hot'); 
    rating = $(this).children('li.rating'); 
    comment = $(this).children('li.comment'); 
    marked = $(this).children('li.marked'); 

    $(this).empty(); 

    $(this).append($(category)); 
    $(this).append($(time)); 
    $(this).append('<li class="icon participant_one_icon'+$(participant_one_icon)+'</li>'); 
    $(this).append('<li class="icon participant_two_icon'+$(participant_two_icon).text()+'</li>'); 
    $(this).append('<li class="headline"><ul>'+$(participant_one)+'<li><p>:</p></li>'+$(participant_two)+'</ul><p><span>'+$(event_type)+'</span> '+$(event_name)+'</p></li>'); 

}).mouseleave(function(){ 
    $(this).removeClass('expanded'); 
    $(this).empty(); 
    // APPEND ORIGINAL STUFF 
}) 

不好用... $(category)和$(time)附加在正確的方式，但其他包括爲object Object

任何提示？

Answer 1

如果你有這樣的信息需要在懸停時更改，也許你應該想到直接擴展版本有一個隱藏的，所以懸停你只需要隱藏原來的，然後顯示隱藏的。

<ul class="original"> 
    <li> ... <li> 
    <li> ... <li> 
</ul> 

<ul class="hidden"> 
    <li> ... <li> 
    <li> ... <li> 
</ul> 

JS部分

$('body').on('mouseenter','ul.original',function() { 
    $(this).addClass('hidden') 
      .next().removeClass('hidden'); 
}).on('mouseleave', 'ul.original', function(){ 
    $(this).removeClass('hidden') 
      .next().addClass('hidden'); 
}); 

CSS

.hidden { display: none; }