jq怎么写商品规格选择???

Question

JQ如何写商城商品规格选择?如图,比如我选择码数,点击选中后改变边框颜色,再次点击再恢复原来的.
代码就只能写成这样了,,目前能实现的功能就是点击后可以打印出对应的 文本内容
实在没头绪了...

Answer 1

一般用input type=radio + CSS来

如果用图上jq写的话 设置选中后高亮的class样式例如active

$(".p>span").on("click",e=>{
  var yard=$(e.target).text()
  
  if($(e.target).hasClass('active')){
    $(e.target).removeClass('active')
  }else{
    $(".p>span").removeClass('active')
    $(e.target).addClass('active')
  }
})

Answer 2

记录一个状态，根据状态设置边框颜色

Answer 3

其实这里你需要的并不是 jQuery，类似的功能直接用 HTML + CSS 就能实现，核心是使用 :checked + label 选择器。

具体做法可以参考我的文章 纯CSS实现多选组件，如果有时间的话，最好把我的讲堂 写 CSS 也要开脑洞：万能的 :checked + label 也看一遍。

Answer 4

用jQuery的话，了解一下toggleClass吧（但是这样会导致多个标签同时被选中）。

所以可以这样实现：

$('span').on('click', function () {
  let $target = $(this)

  let shouldBeAdd = !$target.hasClass('selected')

  $('span').removeClass('selected')

  shouldBeAdd && $target.addClass('selected')
})

• P.S. 当然，这样并不是性能最好的，因为每次都会遍历那几个尺码标签，但是已经足够用了，233 *