更改特定selectable() jquery的背景

Question

我正在尝试使用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，但仍然一无所获。

Answer 1

您可以使用create事件

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

Answer 2

你可以为此编写一个css hack

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

Answer 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>