标签：evel enter 有用 type direct style ext 嵌套 点击图片
(点击图片进入关卡)
选择一个元素的近邻来控制近邻！
简介
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>
「网易官方」极客战记（codecombat）攻略-网页开发2-同胞之争-sibling-rivalry
标签：evel enter 有用 type direct style ext 嵌套 点击图片
原文地址：https://www.cnblogs.com/codecombat/p/12925164.html
