0

目前，我正在使用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 中的背景，它会完美运行。

在 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>标签中指定的那样改变。

4

1 回答 1

0

使用 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
})
于 2013-01-17T15:13:16.510 回答