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

Question

目前，我正在使用selectable JQUERY功能

<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
})