时间戳

首页 > 解决方案 > 如何只允许在 datatist 中标记一张图像？

jquery - 如何只允许在 datatist 中标记一张图像？

问题描述

如何使用 jquery 在基于 datalist 的图库中设置所选图像的样式，以便当您在图库中选择另一张图片时，删除先前选择的图像中的样式。脚本：

<script type="text/javascript">
         $(document).ready(function () {
             $('.Image1').click(function () {
                $(this).css('border', '3px solid orange');
             });
         });
</script>

标签： jqueryasp.netdatalist

解决方案

切换类比使用更容易撤消，css()因为您可以轻松地将该类作为选择器来删除它

$('.Image1').click(function() {
  // remove class from prior selection
  $('.Image1.selected').removeClass('selected');
  // add classs to current selection
  $(this).addClass('selected')
});
.Image1 {
  border: 1px solid #ccc;
  margin: 1em;
  padding: 1em;
}

.Image1.selected {
  border: 3px solid orange
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Image1">One</div>
<div class="Image1">Two</div>
<div class="Image1">Three</div>
<div class="Image1">Four</div>

推荐阅读