1

私は要素が<div>いっぱいです。<ul>これらの要素の 1 つにカーソルを合わせると、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

ヒントはありますか？

4

1 に答える 1

3

ホバー時にそのような情報を変更する必要がある場合は、展開されたバージョンに直接非表示のバージョンがあることを考える必要があるため、ホバー時に元のバージョンを非表示にしてから非表示のバージョンを表示するだけで済みます。

<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; }
于 2012-08-31T13:07:49.330 に答える