Question

我希望一次只能选择一张卡片，因此如果选择了一张卡片并且点击了另一张卡片，则第一张卡片将被取消选择，新卡片将成为所选卡片。

提前致谢！

＆＃13;

0, 42

＆＃13;

$('.option-card').click(function() {
  if ($(this).hasClass('choice')) {
    $(this).removeClass('choice');
  } else {
    $(this).addClass('choice');
  }
});

＆＃13;

.option-card {
    width: 21.9%;
    height: auto;
    padding: 15px 15px 0;
    margin: 0 10px 10px;
    border: 2px #cfcfcf solid;
    border-radius: 15px;
    display: inline-block;
}
.option-card:first-of-type {
    margin-left: 0;
}
.option-card:last-of-type {
    margin-right: 0;
}
.option-card:hover,
.option-card.choice {
    border: 2px #0079c1 solid;
    text-decoration: none;
}
a.option-card p:hover {
    text-decoration: none;
}
.card-thumb {
    width: 100%;
    border-radius: 50%;
    margin-bottom: 15px;
}

＆＃13;

Answer 1

只需从可能具有该类的其他元素中删除choice类名，然后将其添加到单击的元素中：

$('.option-card').click(function() {

  // remove the class-name from the the other elements:
  $('.option-card').removeClass('choice');

  // add the class to the clicked element:
  $(this).addClass('choice');
});

$('.option-card').click(function() {
  $('.option-card').removeClass('choice');
  $(this).addClass('choice');
});

.option-card {
  width: 21.9%;
  height: auto;
  padding: 15px 15px 0;
  margin: 0 10px 10px;
  border: 2px #cfcfcf solid;
  border-radius: 15px;
  display: inline-block;
}
.option-card:first-of-type {
  margin-left: 0;
}
.option-card:last-of-type {
  margin-right: 0;
}
.option-card:hover,
.option-card.choice {
  border: 2px #0079c1 solid;
  text-decoration: none;
}
a.option-card p:hover {
  text-decoration: none;
}
.card-thumb {
  width: 100%;
  border-radius: 50%;
  margin-bottom: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="option-card">
  <img src="http://placekitten.com/100/100" class="card-thumb" alt="">
  <p>Sodales feugiat etiam venenatis dui convallis</p>
</div>

<div class="option-card">
  <img src="http://placekitten.com/100/100" class="card-thumb" alt="">
  <p>Sodales feugiat etiam venenatis dui convallis</p>
</div>

<div class="option-card">
  <img src="http://placekitten.com/100/100" class="card-thumb" alt="">
  <p>Sodales feugiat etiam venenatis dui convallis</p>
</div>

或者，使用纯JavaScript：

// defining the function, and setting the default
// parameter type of 'opts' to be an Object-literal
// (ES6):
function oneElementOnly(opts = {}) {

  // the default settings for the function,
  // can be overridden by passing in an
  // opts Object to override the defaults:
  var settings = {
    'selectedClass': 'choice',
    'selector': '.option-card'
  };

  // finding the keys of the opts Object, using
  // Object.keys():
  Object.keys(opts)
    // iterating over that array of properties using
    // Array.prototype.forEach() with an Arrow function;
    // where the variable 'key' is the current property
    // name of the Object, and we update the
    // settings[key] to be equal to the opts[key]:
    .forEach(key => settings[key] = opts[key]);

  // converting the collection returned by
  // document.querySelectorAll() into an Array, using
  // Array.from():
  Array.from(document.querySelectorAll(settings.selector))

    // iterating over each element in that Array, and
    // for each element removing the 'settings.selectedClass'
    // from the element's list of class-names:
    .forEach(element => element.classList.remove(settings.selectedClass));

  // adding the settings.selectedClass to the clicked element:
  this.classList.add(settings.selectedClass);

}

// retrieving all the elements to which the event-handler should
// be bound (as an Array):
var options = Array.from(document.querySelectorAll('.option-card'));

// iterating over each of those elements, and binding the
// oneElementOnly() function as the event-handler for the
// 'click' event:
options.forEach(option => option.addEventListener('click', oneElementOnly));

function oneElementOnly(opts = {}) {
  var settings = {
    'selectedClass': 'choice',
    'selector': '.option-card'
  };

  Object.keys(opts).forEach(key => settings[key] = opts[key]);

  Array.from(document.querySelectorAll(settings.selector))
    .forEach(element => element.classList.remove(settings.selectedClass));

  this.classList.add(settings.selectedClass);

}

var options = Array.from(document.querySelectorAll('.option-card'));

options.forEach(option => option.addEventListener('click', oneElementOnly));

.option-card {
  width: 21.9%;
  height: auto;
  padding: 15px 15px 0;
  margin: 0 10px 10px;
  border: 2px #cfcfcf solid;
  border-radius: 15px;
  display: inline-block;
}
.option-card:first-of-type {
  margin-left: 0;
}
.option-card:last-of-type {
  margin-right: 0;
}
.option-card:hover,
.option-card.choice {
  border: 2px #0079c1 solid;
  text-decoration: none;
}
a.option-card p:hover {
  text-decoration: none;
}
.card-thumb {
  width: 100%;
  border-radius: 50%;
  margin-bottom: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="option-card">
  <img src="http://placekitten.com/100/100" class="card-thumb" alt="">
  <p>Sodales feugiat etiam venenatis dui convallis</p>
</div>

<div class="option-card">
  <img src="http://placekitten.com/100/100" class="card-thumb" alt="">
  <p>Sodales feugiat etiam venenatis dui convallis</p>
</div>

<div class="option-card">
  <img src="http://placekitten.com/100/100" class="card-thumb" alt="">
  <p>Sodales feugiat etiam venenatis dui convallis</p>
</div>

参考文献：

JavaScript的：
- Array.from()。
- Array.prototype.forEach()。
- Arrow functions。
- Element.classList。
- EventTarget.addEventListener()。
jQuery的：
- addClass()。
- click()。
- removeClass()。

Answer 2

这个很简单。

$('.option-card').click(function() {
  $(".choice").removeClass("choice");
  $(this).addClass("choice");
});

.option-card {
    width: 21.9%;
    height: auto;
    padding: 15px 15px 0;
    margin: 0 10px 10px;
    border: 2px #cfcfcf solid;
    border-radius: 15px;
    display: inline-block;
}
.option-card:first-of-type {
    margin-left: 0;
}
.option-card:last-of-type {
    margin-right: 0;
}
.option-card:hover,
.option-card.choice {
    border: 2px #0079c1 solid;
    text-decoration: none;
}
a.option-card p:hover {
    text-decoration: none;
}
.card-thumb {
    width: 100%;
    border-radius: 50%;
    margin-bottom: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="option-card">
<img src="http://placekitten.com/100/100" class="card-thumb" alt="">
<p>Sodales feugiat etiam venenatis dui convallis</p>
</div>

<div class="option-card">
<img src="http://placekitten.com/100/100" class="card-thumb" alt="">
<p>Sodales feugiat etiam venenatis dui convallis</p>
</div>

<div class="option-card">
<img src="http://placekitten.com/100/100" class="card-thumb" alt="">
<p>Sodales feugiat etiam venenatis dui convallis</p>
</div>

Answer 3

我做了一些小改动。点击，首先验证是否已选择div（（'。option-card'））。将它存储到var。删除所有div的类（（'。option-card'））。如果尚未标记，则添加类（选项）。这样div就是Mutual。 P.N：我可以

$('.option-card').click(function() {
 var isMarked=$(this).hasClass('choice');
 $('.option-card').removeClass('choice');
if(!isMarked){
$(this).addClass('choice');
}
  });

Answer 4

到目前为止最简单的方法是检查长度＆gt; 0.完美运作。

$('.option-card').click(function() {
  if ($('.option-card.choice').length > 0) {
    $('.choice').removeClass('choice');
    $(this).addClass('choice');
  } else {
    $(this).addClass('choice');
  }
});

https://jsfiddle.net/we5hm4an/1/

使用jQuery一次只选择一个类型的一个元素

4 个答案: