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 に答える