这是我到目前为止的脚本示例。 选择<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>
获取一个随机数(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>元素共享一个类，因此您可以仅针对该类并使用 .addClass(( 为它们提供 .ui 选择的类。
$('.ui-widget-content').addClass('.ui-selected');