更喜欢jQuery上的'ui selected'类而不是CSS类_Jquery_Css_Jquery Ui_Bind_Jquery Events

更喜欢jQuery上的'ui selected'类而不是CSS类

jquery css jquery-ui

更喜欢jQuery上的'ui selected'类而不是CSS类,jquery,css,jquery-ui,bind,jquery-events,Jquery,Css,Jquery Ui,Bind,Jquery Events,我在jQuery中有可选择的交互 CSS代码： <style> #feedback { font-size: 1.4em; } #selectable .ui-selecting { background: #FECA40; } #selectable .ui-selected { background: #F39814; color: white; } #selectable { list-style-type: none; margin: 0; p

我在jQuery中有可选择的交互

CSS代码：

<style>
    #feedback { font-size: 1.4em; }
    #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; }
</style>


#反馈{字体大小：1.4em；}
#可选。用户界面选择{背景：#FECA40；}
#可选。ui已选择{背景：#F39814；颜色：白色；}
#可选{列表样式类型：无；边距：0；填充：0；宽度：60%；}
#可选li{边距：3px；填充：0.4em；字体大小：1.4em；高度：18px；}

JQuery代码：

<script>
$(function() {
    $( "#selectable" ).selectable();
    });

$('#selectable li').bind({
    mouseover: function(){
        if($(this).hasClass('ui-selected')){
        }else{
            $(this).css("background","#bef4b4") 
        }
    },
    mouseout: function(){
        if($(this).hasClass('ui-selected')){
        }else{
            $(this).css("background","#d4f9cd") 
        }
    }
        
    
})


</script>


$（函数（）{
$（“#可选”）.selective（）；
});
$（'#可选li'）.bind({
mouseover:function（）{
if（$（this）.hasClass（'ui-selected'））{
}否则{
$（this.css（“背景”，“bef4b4”）
}
},
mouseout:function（）{
if（$（this）.hasClass（'ui-selected'））{
}否则{
$（this.css（“背景”，“#d4f9cd”）
}
}
})

HTML代码：

<body>

<ol id="selectable">
     <li class="ui-widget-content">Item 1</li>
     <li class="ui-widget-content">Item 2</li>
     <li class="ui-widget-content">Item 3</li>
     <li class="ui-widget-content">Item 4</li>
     <li class="ui-widget-content">Item 5</li>
     <li class="ui-widget-content">Item 6</li>
     <li class="ui-widget-content">Item 7</li>
</ol>


</body>


第1项
第2项
第3项
第4项
第5项
第6项
第7项

但是我在这个

上定义了mouseover
和mouseout
事件，它们改变了bakcground的颜色
现在，当我单击元素backgound color
时，属性（在JQuery代码上）比#selective.ui selected
（在CSS代码上）更可取
当我点击标签#可选择时，我想要。选中的ui
处于启用状态。
请参见：
#selectable li.ui-selectee:not(.ui-selected) {
   background: #d4f9cd;
   color: black;
}

#selectable li.ui-selectee:not(.ui-selected):hover {
   background: #bef4b4;
   color: black;
}

在鼠标退出事件示例中，如果将背景色设置为白色并单击任何标记，则其他的背景色也会更改。请试一试。