Button / Span布尔逻辑与javascript一致，反之亦然

Question

我有一种情况，那里有很多按钮（基本上是带有图标，但就像按钮一样）。在css的帮助下按下时，每个按钮都会被阴影化。这个按钮应链接到javascript中的变量或函数。我想要的只是按钮和javascript应该是同步的，这意味着当按下按钮时javascript变量应为true或当js变量为true时按钮应处于按下或ON状态。我已经完成了这个逻辑，但它看起来并不是最佳实践，因为有时UI按钮和javascript不同步。有没有最好的方法来做到这一点？还应该有一种方法来控制按钮组的状态

上的一个javascript函数

注意：我不想调用Ajax或任何与服务器通信的东西。这纯粹是UI要求。

HTML

 <span onclick="applyPropertiesChanges('Text', textButton)"> <span id="switch"
            class="text_btn-background toolboxItem ui-icon btn-icon-enable btn-fontItalicIcon" /></span>

JS

var textButton
function applyPropertiesChanges(type,value)
{
  if(type == 'Text')
 { textButton = !textButton;
  //Check the UI span 
  if(value && this.children.hasClass('btn-icon-enable') &&)
{ 
 //UI span is on
//do nothing
}else{
  if(!value && !this.children.hasClass('btn-icon-diable')
 {// do nothing
 } else 
{
// Toggle the class of the span
}
}

 }
}

Answer 1

如果只是在跨度中添加属性或类，则可以更轻松地实现此目的。然后你可以检查哪些具有该属性：

 <span class="btn"> <span id="switch"
            class="text_btn-background toolboxItem ui-icon btn-icon-enable btn-fontItalicIcon" /></span>

$('.btn').click(function() {
   $(this).addClass('data-clicked');
   $('.btn').not(this).removeClass('data-clicked');
});

现在，当您点击时，您可以很容易地知道点击了哪一个：$('.btn.data-clicked')并根据它启用了禁用。