javascript - 如何实现只选择一个 block ，而不是所有 block ？

Question

现在当点击带有蓝色边框的图片时，所有 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>

Answer 1

您的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>