jquery 数组添加事件

最新推荐文章于 2022-09-20 20:52:15 发布

原创最新推荐文章于 2022-09-20 20:52:15 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #jquery

本文介绍了一个使用HTML和JavaScript实现的简单收藏功能。通过HTML结构定义元素，并利用JavaScript来控制元素的显示与隐藏，从而实现点击按钮切换收藏状态的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html

<ul class="widget w-friend-pages-added notification-list friend-requests">
    <li class="inline-items">
        <div class="author-thumb">
            <img src="img/avatar41-sm.jpg" alt="author">
        </div>
        <div class="notification-event">
            <a href="jobPosition.html" class="h6 notification-friend">php工程师</a>
             <span class="chat-message-item">软通动力有限公司</span>
         </div>
         <span class="notification-icon unStar" data-toggle="tooltip" data-placement="top" data-original-title="收藏">
            <svg class="olymp-star-icon" data-toggle="modal" data-target="#exampleModalCenter">
                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-star-icon"></use>
            </svg>
        </span>
        <span class="notification-icon isStar" data-toggle="tooltip" data-placement="top" data-original-title="已收藏">
            <i class="fas fa-star" data-toggle="modal" data-target="#exampleModalCenter2">
            </i>
        </span>
    </li>
</ul>

js

        
        var u=$(".unStar");
        for(var i=0;i<u.length;i++) {
            u[i].onclick=function () {
                $(this).css('display','none');
                $(this).next().css('display','block');
            }
        }

        var c=$(".isStar");
        for(var q=0;q<c.length;q++) {
            c[q].onclick=function () {
                $(this).css('display','none');
                $(this).prev().css('display','block');
            }
        }