码迷,mamicode.com
首页 > Web开发 > 详细

jquery: siblings使用删除当前样式,添加所有siblings样式

时间:2020-06-20 14:15:09      阅读:72      评论:0      收藏:0      [点我收藏+]

标签:esc   query   ons   remove   script   样式   ima   ict   test   

html:

<div class="hot-purchase">
                    <div class="title">热门团购</div>
                    <dl class="item on">
                        <dt>
                            <a href="" class="text-area">[text]</a>
                            <a href="" class="text-name">title</a>
                            <span class="price">13000</span>
                        </dt>
                        <dd class="tag-1">
                            <span class="tag">title</span>
                            <span class="description">test</span>
                        </dd>
                        <dd class="tag-2 clearfix">
                            <div class="picture-left fl">
                                <a href=""><img src="../images/consult_hot_purchase.jpg" alt=""></a>
                            </div>
                            <div class="content-right fl">
                                <p>description</p>
                                <a href="">link</a>
                            </div>
                        </dd>
                    </dl>
                    <dl class="item">
                        <dt>
                            <a href="" class="text-area">[text]</a>
                            <a href="" class="text-name">title</a>
                            <span class="price">13000</span>
                        </dt>
                        <dd class="tag-1">
                            <span class="tag">title</span>
                            <span class="description">test</span>
                        </dd>
                        <dd class="tag-2 clearfix">
                            <div class="picture-left fl">
                                <a href=""><img src="../images/consult_hot_purchase.jpg" alt=""></a>
                            </div>
                            <div class="content-right fl">
                                <p>description</p>
                                <a href="">link</a>
                            </div>
                        </dd>
                    </dl>
                    <dl class="item">
                        <dt>
                            <a href="" class="text-area">[text]</a>
                            <a href="" class="text-name">title</a>
                            <span class="price">13000</span>
                        </dt>
                        <dd class="tag-1">
                            <span class="tag">title</span>
                            <span class="description">test</span>
                        </dd>
                        <dd class="tag-2 clearfix">
                            <div class="picture-left fl">
                                <a href=""><img src="../images/consult_hot_purchase.jpg" alt=""></a>
                            </div>
                            <div class="content-right fl">
                                <p>description</p>
                                <a href="">link</a>
                            </div>
                        </dd>
                    </dl>
                    <dl class="item">
                        <dt>
                            <a href="" class="text-area">[text]</a>
                            <a href="" class="text-name">title</a>
                            <span class="price">13000</span>
                        </dt>
                        <dd class="tag-1">
                            <span class="tag">title</span>
                            <span class="description">test</span>
                        </dd>
                        <dd class="tag-2 clearfix">
                            <div class="picture-left fl">
                                <a href=""><img src="../images/consult_hot_purchase.jpg" alt=""></a>
                            </div>
                            <div class="content-right fl">
                                <p>description</p>
                                <a href="">link</a>
                            </div>
                        </dd>
                    </dl>
                    <dl class="item">
                        <dt>
                            <a href="" class="text-area">[text]</a>
                            <a href="" class="text-name">title</a>
                            <span class="price">13000</span>
                        </dt>
                        <dd class="tag-1">
                            <span class="tag">title</span>
                            <span class="description">test</span>
                        </dd>
                        <dd class="tag-2 clearfix">
                            <div class="picture-left fl">
                                <a href=""><img src="../images/consult_hot_purchase.jpg" alt=""></a>
                            </div>
                            <div class="content-right fl">
                                <p>description</p>
                                <a href="">link</a>
                            </div>
                        </dd>
                    </dl>
                </div>

js: 

$(document).ready(function () {
        $(‘.consult-right .hot-purchase .item‘).each(function (index) {
            $(this).hover(function () {
                $(this).addClass(‘on‘);
                let siblings = $(this).siblings(‘.item‘);
                siblings.removeClass(‘on‘)
            })
        })
    })

 

jquery: siblings使用删除当前样式,添加所有siblings样式

标签:esc   query   ons   remove   script   样式   ima   ict   test   

原文地址:https://www.cnblogs.com/Nyan-Workflow-FC/p/13168176.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!