如何在点击时将每个可选择的 li 设置为不同的颜色？ (JQuery UI)

Question

这是我目前拥有的脚本示例。选择 <li> 后的默认行为是将背景颜色更改为橙色（也是默认值）。我的目标是让每个 <li> 在被选中时变成不同的颜色。

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

 <style>
.st0{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; width: 85px;}
</style>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
  $( "#selectable" ).selectable();
});

$( "#btn1" ).click( function(event, ui) {
  // code here is too long to include
} ); 
</script>
</head>
<body>

<ol id = "selectable">
    <li id = "btn1" class="ui-widget-content">Office #1</li> 
    <li id = "btn2" class="ui-widget-content">Office #2</li> 
    <li id = "btn3" class="ui-widget-content">Office #3</li> 
    <li id = "btn4" class="ui-widget-content">Office #4</li>     
</ol>
</body>
</html>

Answer 1

由于所有 <li> 元素共享一个 class，您可以只定位 class 并使用 .addClass() 为它们提供 .ui-selected class.

$('.ui-widget-content').addClass('.ui-selected');

Answer 2

如何获取一个随机数（0 到 255 之间）来定义 RGB 颜色？
它不能确保颜色是独一无二的...但是...

$(document).ready(function(){

  $( "#selectable" ).selectable();

  $("li").on("mousedown",function(){
    var r = parseInt(Math.random()*255);
    var g = parseInt(Math.random()*255);
    var b = parseInt(Math.random()*255);

    console.log("rgb("+r+","+g+","+b+")");
    $(this).css({"background-color":"rgb("+r+","+g+","+b+")"})
  });

});

.st0{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; width: 85px;}

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<ol id = "selectable">
  <li id = "btn1" class="ui-widget-content">Office #1</li> 
  <li id = "btn2" class="ui-widget-content">Office #2</li> 
  <li id = "btn3" class="ui-widget-content">Office #3</li> 
  <li id = "btn4" class="ui-widget-content">Office #4</li>     
</ol>

顺便说一句，click事件被.selectable()阻止了，所以我使用了mousedown。

如何在点击时将每个可选择的 li 设置为不同的颜色？ (JQuery UI)

How do I set every selectable li to a different color on click? (JQuery UI)

javascript

css

jquery

jquery-ui

jquery-ui-selectable