使用可选jQuery更改背景颜色

k4emjkb1 于 2023-05-22 发布在 jQuery

关注(0)|答案(1)|浏览(93)

我使用可排序和可选择的jQuery在表之间移动项目。移动项目按预期工作。然而，我想有一个不同的背景颜色时，项目选定，但它没有工作。有人能给我一个解决方案吗？先谢谢你了。

$(function() {
  // Make the list selectable
  $('.ulClass').selectable({
    selected: function(event, ui) {
      $(ui.selected).addClass("ui-selected");
    },
    unselected: function(event, ui) {
      $(ui.unselected).removeClass("ui-selected");
    }
  });
});

.ui-state-default {
  background-color: white;
}

.ui-selected {
  background: #F39814 !important;
  color: white;
}

.ui-selecting {
  background: blue;
}

.ui-selected.ui-selecting {
  background: #F39814 !important;
  color: white;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" integrity="sha512-ELV+xyi8IhEApPS/pSj66+Jiw+sOT1Mqkzlh8ExXihe4zfqbWkxPRi8wptXIO9g73FSlhmquFlUOuMSoXz5IRw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<span>
   <ul id="div_3" class="clsDiv ulClass ui-sortable ui-selectable">
     <li class="ui-state-default ui-sortable-handle ui-selectee" name="92">Ben</li>
     <li class="ui-state-default ui-sortable-handle ui-selectee" name="108">Owen</li>
   </ul>
</span>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" integrity="sha512-57oZ/vW8ANMjR/KQ6Be9v/+/h6bq9/l3f0Oc7vn6qMqyhvPd1cvKBRWWpzu0QoneImqr2SkmO4MSqU+RpHom3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

jquery

来源：https://stackoverflow.com/questions/76283555/change-the-background-color-using-selectable-jquery

1条答案

按热度按时间

ajsxfq5m1#

您必须使用更具体的样式来解决此问题。请参见示例。

$(function() {
  // Make the list selectable
  $('.ulClass').selectable();
});

.ui-state-default {
  background-color: white;
}

ul.ui-selectable li.ui-selected {
  background: #F39814;
  color: white;
}

li.ui-selecting {
  background: blue;
}

ul.ui-selectable li.ui-selected.ui-selecting {
  background: #F39814;
  color: white;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" integrity="sha512-ELV+xyi8IhEApPS/pSj66+Jiw+sOT1Mqkzlh8ExXihe4zfqbWkxPRi8wptXIO9g73FSlhmquFlUOuMSoXz5IRw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<span>
   <ul id="div_3" class="clsDiv ulClass ui-sortable ui-selectable">
     <li class="ui-state-default ui-sortable-handle" name="92">Ben</li>
     <li class="ui-state-default ui-sortable-handle" name="108">Owen</li>
   </ul>
</span>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" integrity="sha512-57oZ/vW8ANMjR/KQ6Be9v/+/h6bq9/l3f0Oc7vn6qMqyhvPd1cvKBRWWpzu0QoneImqr2SkmO4MSqU+RpHom3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

赞(0）回复(0）举报 2023-05-22

我来回答

使用可选jQuery更改背景颜色

1条答案

相关问题

热门标签

最新问答