我希望一次只能选择一张卡片,所以如果选择了一张卡片并点击了另一张卡片,则第一张卡片将被取消选择,新的卡片将成为选中的卡片。
提前致谢!
https://jsfiddle.net/we5hm4an/
$('.option-card').click(function() {
if ($(this).hasClass('choice')) {
$(this).removeClass('choice');
} else {
$(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>
最佳答案
这个很简单。
$('.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>
关于javascript - 使用 jQuery 一次只选择一种类型的一个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37665863/