day 2.记一次silbing的使用问题点

最新推荐文章于 2024-02-08 12:21:15 发布

原创最新推荐文章于 2024-02-08 12:21:15 发布 · 429 阅读

0 ·

CC 4.0 BY-SA版权

问题日志专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的按钮阴影效果切换案例。当点击某个按钮时，该按钮将获得阴影效果，而其他兄弟按钮的阴影则会被移除。文章详细记录了作者在实现过程中遇到的问题及解决方案。

前提：我想通过jQuery实现，点击按钮时，使得该元素产生阴影，而它的兄弟元素则失去阴影效果，即如下效果：

我最开始的尝试代码：

 <div id="changBtn">
    <button type="button" class="btn btn-default btn-lg">朴素版</button>
    <button type="button" class="btn btn-warning btn-lg">动态版</button>

</div>
<div id="content">...</div>

<script>    
$(function () {
        $("#content").slideDown(1200);
        $("#changBtn button").focus(function (ev) {
             var ev =window.event||event;
             var target = ev.target;
             target.Siblings.style.boxShadow = "0 0";//修改行
             target.style.boxShadow = "5px 5px gray";
        })
</script>

我一直再修改图中的哪个修改行的代码，发现无论是nextSilbing 还是previcousilbing都会提示：

Uncaught TypeError: Cannot set property 'boxShadow' of undefined

给sibling加上小括号sibling（）则提示这不是一个方法，

----------------------------------------------分割线-------------------------------

显示发表成功后不知道为什么后面全都没有了，哎，直接就写重点吧，细节思索过程就不重写了，下次写在草稿里存个副本

=============================================================

问题点1：上述target.siblings.log 输出是undefined,我是直接定位到button,即便我只定义到父元素也是undefined

问题2：nextSibling 和 previousSiblings 存在一个顺序，向后或者向前，查询的话，target要 target.nextSibling.nextSibling才能从button1定位到button2，为什么target是button，同胞元素（target.nextSibling）不应该是下一个button吗，实际是 button1 #text button2 #text .

最后解决这个睿智问题，我没必要写这个target的直接定位到button直接操作就星。代码如下：

 $(function () {
        $("#content").slideDown(1200);
        $("#changBtn button").focus(function (ev) {
            $("#changBtn button").siblings(".btn-lg").css("box-shadow","0 0");
            this.style.boxShadow = "5px 5px black";
        })
    });

脑壳疼