gpt4 book ai didi

javascript - 如何在点击时将每个可选择的 li 设置为不同的颜色? (JQuery 用户界面)

转载 作者:行者123 更新时间:2023-11-30 15:07:50 25 4
gpt4 key购买 nike

这是我目前拥有的脚本示例。<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>

顺便说一下,.selectable() 阻止了 click 事件,所以我使用了 mousedown

关于javascript - 如何在点击时将每个可选择的 li 设置为不同的颜色? (JQuery 用户界面),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45496315/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com