Question

我正在为衬衫创建尺寸。我已经在锚标签中给定了尺寸sml xs。当用户未选择而未选择添加到购物车按钮或立即购买按钮时尺寸会显示“请选择尺寸”。.怎么可能...？

$('.size li a').on('click', function(){
  $('.selected').removeClass(); //removes .active class from currently active li
  $(this).addClass('selected'); //sets this element .active
});

.size li {
  list-style: none;
  float: left;
  margin-left: 20px;
}
.selected {
  background-color: #ff4403;
  color: #fff !important;
}

.size li a {
  font-size: 23px;
  text-decoration: none;
  padding: 8px 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label>Size</label>
<ul class="size">
  <li><a href="javascript:void(0);">S</a></li>
  <li><a href="javascript:void(0);">M</a></li>
  <li><a href="javascript:void(0);">L</a></li>
  <li><a href="javascript:void(0);">XL</a></li>
</ul>
<button class="btn btn-success">Buy Now</button>
<br>
<button class="btn btn-success">Add To Cart</button>

Answer 1

您可以将事件绑定到两个按钮上，并检查是否选择了大小：

$('.btn').on('click', e => {
   let length = $('.size').find('.selected').length;
   if(length===0){ alert('Please select size'); }
});

Answer 2

将事件关联到购买和添加按钮。

$('. btn').click(function() {
  if ($('.size li a.selected').length === 0 ) {
    alert('please select size');   // place your code
  }
});

如何验证锚标签

2 个答案: