现在当点击带有蓝色边框的图片时,所有 block 的边框都被涂成红色。如何使当您单击特定 block 时,笔画仅在该 block 中着色并且文本返回到“未选中”?
$('.div').click(function() {
if ( !($('.div').hasClass('selected')) ) {
$('.div').addClass('selected');
$('.p').text('selected text');
} else {
$('.div').removeClass('selected');
}
});
.div {
width: 100px;
height: 100px;
border: 1px solid blue;
cursor: pointer;
}
.selected {
border-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="div" style="background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg)"></div><p class="p">not selected</p>
<div class="div" style="background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg)"></div><p class="p">not selected</p>
<div class="div" style="background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg)"></div><p class="p">not selected</p>
最佳答案
您的click
代码引用:$(".div")
,它获取与该选择器匹配的所有元素。您只想要被点击的那一个,您可以通过 $(this)
获得它。
您在更改文本时做了同样的事情 - 您更改了与 .p
选择器匹配的所有元素的文本。您只需要更改 p
元素的文本,该元素是被点击的 div
的下一个同级元素。
$('.div').click(function() {
if ( !($(this).hasClass('selected')) ) {
$(this).addClass('selected');
$(this.nextElementSibling).text('selected text');
} else {
$(this).removeClass('selected');
$(this.nextElementSibling).text('not selected');
}
});
.div {
width: 100px;
height: 100px;
border: 1px solid blue;
cursor: pointer;
}
.selected {
border-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="div" style="background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg)"></div><p class="p">not selected</p>
<div class="div" style="background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg)"></div><p class="p">not selected</p>
<div class="div" style="background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg)"></div><p class="p">not selected</p>
关于javascript - 如何实现只选择一个 block ,而不是所有 block ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48272420/