How does jq write the selection of product specifications?

how does JQ write the selection of merchandise specifications for shopping malls? As shown in the figure, for example, I select the number of yards, click on it and change the border color, and then click again to restore the original. The
code can only be written like this. At present, the function that can be realized is that you can print out the corresponding text content
after clicking.

Mar.10,2021

record a state, and set the border color according to the status


in fact, what you need here is not that similar functions of jQuery, can be implemented directly with HTML + CSS, the core is to use : checked + label selector.

specific methods can refer to my article pure CSS to achieve multi-selected components , if you have time, it is best to write my lecture to CSS: omnipotent : checked + label also read it.


if you use jQuery, learn about toggleClass (but this will cause multiple tags to be selected at the same time).

so it can be implemented like this:

$(".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')
  }
})
Menu