使用jQuery从列表中选择一个图像

Question

我有一个显示2个块的简单脚本。您可以单击它们并突出显示。

我想强制这样做，这样用户只能随时选择一个区块。

我如何实现这一目标？

演示： http://jsfiddle.net/v36b3s25/

$(".option").on('click',function() {
    $(this).toggleClass('option optionActive');
});

.option, .optionActive {
  margin: 10px;
  background: #CCC;
  float: left;
  text-align: center;
  padding: 0px;
  position: relative;
  border: 3px solid blue;
}

.optionActive .after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  color: #FFF;
}

.optionActive .after {
  display: block;
  background: rgba(0, 0, 0, .6);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="option">
  <img src="http://placehold.it/200x200">
  <div class="after"></div>
</div>

<div class="option">
  <img src="http://placehold.it/200x200">
  <div class="after"></div>
</div>

Answer 1

您可以使用.not()排除当前元素，并从其他options元素中删除该类

$(".option").on('click', function() {
  $(".option").not(this).removeClass('optionActive');
  $(this).toggleClass('optionActive');
});

.option,
.optionActive {
  margin: 10px;
  background: #CCC;
  float: left;
  text-align: center;
  padding: 0px;
  position: relative;
  border: 3px solid blue;
}

.optionActive .after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  color: #FFF;
}

.optionActive .after {
  display: block;
  background: rgba(0, 0, 0, .6);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="option">
  <img src="http://placehold.it/200x200">
  <div class="after"></div>
</div>

<div class="option">
  <img src="http://placehold.it/200x200">
  <div class="after"></div>
</div>

Answer 2

使用siblings

$(".option").on('click',function() {
    $(this).siblings().removeClass('option optionActive');
     $(this).toggleClass('option optionActive');
});

.option, .optionActive {
  margin: 10px;
  background: #CCC;
  float: left;
  text-align: center;
  padding: 0px;
  position: relative;
  border: 3px solid blue;
}

.optionActive .after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  color: #FFF;
}

.optionActive .after {
  display: block;
  background: rgba(0, 0, 0, .6);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="option">
  <img src="http://placehold.it/200x200">
  <div class="after"></div>
</div>

<div class="option">
  <img src="http://placehold.it/200x200">
  <div class="after"></div>
</div>

Answer 3

您应该删除class optionActive，然后添加class选项以将所有选项置于默认状态，但clicke除外。

$(this).siblings().removeClass("optionActive").addClass("option");

检查以下代码：

＆＃13;

＆＃13;

$(".option").on('click', function() {
  $(this).siblings().removeClass("optionActive").addClass("option");
  $(this).toggleClass('option optionActive');
});

＆＃13;

.option,
.optionActive {
  margin: 10px;
  background: #CCC;
  float: left;
  text-align: center;
  padding: 0px;
  position: relative;
  border: 3px solid blue;
}

.optionActive .after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  color: #FFF;
}

.optionActive .after {
  display: block;
  background: rgba(0, 0, 0, .6);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="option">
  <img src="http://placehold.it/200x200">
  <div class="after"></div>
</div>

<div class="option">
  <img src="http://placehold.it/200x200">
  <div class="after"></div>
</div>

＆＃13;

＆＃13;

＆＃13;