html - ui-state-default 和 ui-selected 有 2 种不同的样式

Question

目前，我正在使用selectableJQUERY 函数

<style>
  #selectable .ui-selecting { background: #FECA40; }
  #selectable .ui-selected { background: #F39814; color: white; }
</style>


<ol id="selectable">
  <li class="ui-widget-content">Item 1</li>
  <li class="ui-widget-content">Item 2</li>
  <li class="ui-widget-content">Item 3</li>
  <li class="ui-widget-content">Item 4</li>
  <li class="ui-widget-content">Item 5</li>
  <li class="ui-widget-content">Item 6</li>
  <li class="ui-widget-content">Item 7</li>
</ol>

但由于某种原因，当我选择一个元素时，颜色不会变为亮橙色，而是恢复为默认灰色，ui-state-default如下所示：

但是，如果我转到 Chrome 调试器并取消选中样式部分中 ui-state-default 中的背景，它会完美运行。

是不是因为这个片段：

var nodes = document.getElementById('selectable').getElementsByClassName('ui-widget-content');  
      if (nodes.length > 0)
      {
        nodes[0].innerHTML = getSymbol();
        nodes[0].setAttribute("class", "ui-state-default");
      }

我该如何解决这个问题，这样当我点击感兴趣的元素时，颜色会像我在<style>标签中指定的那样改变。

Answer 1

使用 jQuery，这非常简单。

$('.ui-widget-content')将选择您的所有 LI 元素。（或者你可以使用$('#selectable li')）

$('.ui-widget-content').click(function() {
      $(.'ui-widget-content').removeClass('.ui-state-default'); <-- this clears previous selections
      $(this).addClass('.ui-state-default'); <-- this adds the class to the clicked item
})