更改特定 selectable() jquery 的背景答案

【问题标题】：Change background of specific selectable() jquery更改特定 selectable() jquery 的背景
【发布时间】：2017-04-24 22:56:55
【问题描述】：

我正在尝试使用 jquery 更改可选函数中一个特定元素的颜色。

<ol id="selectable">
    <li class="ui-widget-content" id="s1">Option 1</li>
    <li class="ui-widget-content" id="s2">Option 2</li>
    <li class="ui-widget-content" id="s3">Option 3</li>
    <li class="ui-widget-content" id="s4">Option 4</li>
    <li class="ui-widget-content" id="s5">Option 5</li>
</ol>

我只是想改变id="s4"的背景颜色，但不知道是否可以。

函数是：

$(function() {
    $("#selectable").selectable();      
});

我已经尝试过使用 jquery 和 css 但仍然没有。

【问题讨论】：

这适用于任何类型的下拉菜单吗？
没有。我正在尝试做这样的事情：jqueryui.com/selectable，但其中一个颜色不同。
好的...感谢您的链接....我创建了相同的演示...请从答案中检查我的小提琴
我已经检查过了。第二个对我帮助很大！谢谢！ :)

标签： jquery html colors background jquery-ui-selectable

【解决方案1】：

您可以为此编写一个 css hack

#selectable #s4.ui-selected { background: red; }

【讨论】：

@MiniKing17 - Tiago，请检查一下这个黑客。 :)

【解决方案2】：

你可以使用create事件

$(function() {
    $("#selectable").selectable({
        create: function(event, ui) {
            $("#s4").css('background', 'red');
        },
        selected: function(event, ui) {
            $(ui.selected).css('background', 'yellow');
        }
    });
});

Fiddle

【讨论】：

谢谢！但我只想在选中时更改颜色
@MiniKing17-Tiago，那么您可以使用selected 参见jsfiddle.net/jet1h78e 或jsfiddle.net/844jc0ce

【解决方案3】：

检查这个fiddle

脚本：

     $(document).ready(function(){
        $(".myGrid").click(function(){
            $(".myGrid").each(function() {
                $(this).css('background-color', '');
            });
            $(this).css('background-color', 'red');
           }); 
        });

HTML：

<ol id="selectable">
        <li class="ui-widget-content myGrid" id="s1">Option 1</li>
        <li class="ui-widget-content myGrid" id="s2">Option 2</li>
        <li class="ui-widget-content myGrid" id="s3">Option 3</li>
        <li class="ui-widget-content myGrid" id="s4">Option 4</li>
        <li class="ui-widget-content myGrid" id="s5">Option 5</li>
</ol>

【讨论】：