Fatal编程技术网
  • jquery/
  • Jquery 更改元素悬停时的html标记

Jquery 更改元素悬停时的html标记

jquery html

Jquery 更改元素悬停时的html标记,jquery,html,Jquery,Html,我有一个充满元素。当我将鼠标悬停在其中一个元素上时，我想对html标记进行调整 我的标准项目如下所示： <ul> <li class="category"><img src="source" /></li> <li class="time days"><p>text</p></li> <li class="participant participant_one">&

我有一个
充满
元素。当我将鼠标悬停在其中一个元素上时，我想对html标记进行调整

我的标准
项目如下所示：

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

    

  • 

  • 文本
    • 

  • 文本
    • 

  • ：
    • 

  • 文本
    • 

  • 事件
    • 

  • 文本
    • 

  • 945°
    • 

  • 4.99
    • 

  • 7.544
    • 

  •
现在悬停时，我希望此元素如下所示：

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

    

  • 

  • 29.05
    • 

  • 

  • 

  • 

      

    • 文本
      • 

    • :
      • 

    • 文本
      • 

    
事件名
    

    • 

  • 

      

    • 

    • 

    • 

    

    •
我想使用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
})

$（'div.match_entries ul'）.mouseenter（函数（）{
$（this.addClass（'expanded'）；
category=$（this.children（'li.category'）；
时间=$（this.children（'li.time'）；
参与者_-one_-original=$（this）.children（'li.participant_-one'）；
参与者图标=$（this）.children（'li.participant\u one img'）；
参与者之一=$（this.children（'li.participant_one'）。移除（'img'）；
参与者二（原始）=$（this.children（'li.participant二‘））；
参与者图标=$（this）.children（'li.participant\u two img'）；
参与者二=$（this）.children（'li.participant二'）.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'）；
评级=$（this.children（'li.rating'）；
comment=$（this.children（'li.comment'）；
marked=$（this.children（'li.marked'）；
$（this.empty（）；
附加（$（类别））；
追加（$（时间））；

$（this）.append（“如果您在悬停时需要更改这些信息，也许您应该考虑直接将扩展版本设置为隐藏版本，因此在悬停时您只需隐藏原始版本，然后显示隐藏版本


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

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


CSS


另一个选项：向标记中添加扩展版本和非扩展版本。使用display:none隐藏扩展版本。然后使用Javascript切换悬停元素的显示。指定来自对象的内容，例如，
$（$（事件类型\原始））.html（）
或类似的主要提示是，
对象对象对象
是在一个对象上调用
ToString
时得到的，而这个对象本身没有对ToString的重写。当然，如果在字符串上下文中使用对象，它会隐式调用ToString。所以问题是您正在处理一个对象（实际上是一个jquery对象）如果它不是字符串，就像Alex Ball说的那样，你通常需要对象上的方法或属性。谢谢。我没有想到。这应该是最简单的方法。好吧，事实上这并没有起到应有的作用，因为在你输入ul.original的那一刻，你鼠标指向的元素失去了类“original”，从而导致“闪烁”。但你的方法是正确的，我找到了一个解决方案：$（'div.match_entries ul.original'）.mouseenter（function（）{$（this.addClass（'hidden'）.next（）.removeClass（'hidden'）；}）$（'div.match_entries ul.expanded'）.mouseleave（function（）{$（this.addClass（'hidden'）.prev（）.removeClass（'hidden'）；}）；