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

更改元素悬停时的html标记

1 个答案: