「网易官方」极客战记（codecombat）攻略-网页开发2-同胞之争-sibling-rivalry

Posted 2021-02-18 codecombat

(点击图片进入关卡)

选择一个元素的近邻来控制近邻！

简介

siblings() 函数的作用返回一列近邻元素

默认代码

<!-- 要选择邻近元素，使用 "siblings()" -->

<!-- 使用此功能可以忽略目标旁边的元素。 -->

<!-- 元素在相似的情况下等同近邻元素。 -->

 

<script>

    var selectable = $(".selectable");

    function focusSelected() {

        var targetElement = $(this);

        var siblings = targetElement.siblings();

        siblings.addClass("mute");

        // 使用removeClass()去除同胞中的“sel”。

        targetElement.removeClass("mute");

        // 使用addClass()把“sel”添加到目标元素

 

    }

    selectable.on("click", focusSelected);

</script>

<style>

    .selectable {

        /* 这使得元素更明显。 */

        cursor: pointer;

        

    }

    .sel {

        

    }

    .mute {

        /* 这使得元素更明显。 */

        opacity:0.1;

    }

    body {

        text-align:center;

    }

</style>

<div>

    <!-- 注：这些imgs不与下面的divs相互影响。 -->

    <img class="selectable"

    src="http://direct.codecombat.com/file/db/thang.type/54eb540b49fa2d5c905ddf1a/portrait.png"/>

    <img class="selectable"

    src="http://direct.codecombat.com/file/db/thang.type/54eb4d5949fa2d5c905ddf06/portrait.png"/>

    <img class="selectable"

    src="http://direct.codecombat.com/file/db/thang.type/52e989a4427172ae56001f04/portrait.png"/>

</div>

<div>

    <!-- 这些divs不与上面的imgs相互影响。 -->

    <div class="selectable">

        <h3>选项A</h3>

        <p>

            这个选项太棒了！

        </p>

    </div>

    <div class="selectable">

        <h3>选项B</h3>

        <p>

            这个选项有胆识!

        </p>

    </div>

    <div class="selectable">

        <h3>选项C</h3>

        <p>

            这个选项超酷。

        </p>

    </div>

</div>

概览

siblings

siblings() 函数会找出调用元素的所有相邻元素。‘相邻‘指的是所有这些元素都嵌套在html文档的相同深度。

<div>

    <!-- 所有这些按钮都是‘siblings‘: -->

    <button>点我!</button>

    <button>不，点我!</button>

    <button>我才是你应该点的</button>

</div>

<div>

    <!-- 下面这些都不是‘siblings‘: -->

    Hi.

    <div>

        Hello.

        <div>

            你好

        </div>

    </div>

</div>

siblings() 能够为程序查找得到的元素找到相邻元素，这是很有用的。

<script>

    var buttons = $("button");

    buttons.on("click", focusClicked);

    function focusClicked() {

        // 这会移除所有其他选项，而不仅仅移除被点击的那个。

        $(this).siblings().hide();

    }

</script>

<div>

    <button>A</button>

    <button>B</button>

    <button>C</button>

</div>

同胞之争 解法

<!-- 要选择邻近元素，使用 "siblings()" -->

<!-- 使用此功能可以忽略目标旁边的元素。 -->

<!-- 元素在相似的情况下等同近邻元素。 -->

 

<script>

    var selectable = $(".selectable");

    function focusSelected() {

        var targetElement = $(this);

        var siblings = targetElement.siblings();

        siblings.addClass("mute");

        // 使用removeClass()去除同胞中的“sel”。

        siblings.removeClass("sel");

        targetElement.removeClass("mute");

        // 使用addClass()把“sel”添加到目标元素

        targetElement.addClass("sel")

    }

    selectable.on("click", focusSelected);

</script>

<style>

    .selectable {

        /* 这使得元素更明显。 */

        cursor: pointer;

        

    }

    .sel {

        

    }

    .mute {

        /* 这使得元素更明显。 */

        opacity:0.1;

    }

    body {

        text-align:center;

    }

</style>

<div>

    <!-- 注：这些imgs不与下面的divs相互影响。 -->

    <img class="selectable" src=

    "http://direct.codecombat.com/file/db/thang.type/54eb540b49fa2d5c905ddf1a/portrait.png"/>

    <img class="selectable" src=

    "http://direct.codecombat.com/file/db/thang.type/54eb4d5949fa2d5c905ddf06/portrait.png"/>

    <img class="selectable" src=

    "http://direct.codecombat.com/file/db/thang.type/52e989a4427172ae56001f04/portrait.png"/>

</div>

<div>

    <!-- 这些divs不与上面的imgs相互影响。 -->

    <div class="selectable">

        <h3>选项A</h3>

        <p>

            这个选项太棒了！

        </p>

    </div>

    <div class="selectable">

        <h3>选项B</h3>

        <p>

            这个选项有胆识!

        </p>

    </div>

    <div class="selectable">

        <h3>选项C</h3>

        <p>

            这个选项超酷。

        </p>

    </div>

</div>

 

本攻略发于极客战记官方教学栏目，原文地址为：

https://codecombat.163.com/news/jikezhanji-tongbaozhizheng

极客战记——学编程，用玩的！