Question

我需要根据Li标签包含的值更改其颜色，这是对还是错。问题是我正在使用selected.jquery.min.js进行一些UI操作。您可以找到我的代码的示例here。

由于selected.jquery正在创建列表的副本并将其作为LI插入到UL元素中，因此我的代码在将Li元素插入UL元素之前执行。在selected.jquery库完成代码执行并操纵dom后，如何运行我的代码？

var sectors = $("#userProfileSectors > option");

var userProfChosen = $("#userProfileSectors_chosen");
var cities = userProfChosen.find(".chosen-drop").find(".chosen-results");
cities.css("background-color", "silver");

sectors.each(function() {
  var sectorText = $(this).text();
  var sectorVal = $(this).val();

  cities.find("li").each(function() {
    if (sectorText === $(this).text()) {

      $(this).attr("data-web-exists", sectorVal);

      if ($(this).attr("data-web-exists") == "False") {

        $(this).css("background-color", "red")
      }
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="SelectedCities" id="userProfileSectors" style="width: 200px; height: 150px; " multiple="multiple">
  <option value="True">Brussels</option>
  <option value="False">Antwerpen</option>
  <option value="False">Gent</option>
  <option selected="selected" value="True">Berlin</option>
  <option selected="selected" value="True">Tirana</option>
  <option selected="selected" value="False">London</option>
</select>

Answer 1

1。香草JavaScript

您可以通过document.readyState属性来检查DOM是否准备就绪。

if (document.readyState === "complete") {
  //Already loaded!
}

2。 jQuery

或者您通过jQuery方法on检查是否已选择构建DOM，如下所示：

$("#userProfileSectors").on("chosen:ready", function(){
    alert("I am ready!");
});

Answer 2

您可以使用以下命令，就像选择值时一样。jQuery执行更改功能，如文档chosen document中所示因此您可以在此功能中添加更改颜色的逻辑。您的功能将类似于此检查，它是小提琴的扩展

$("#userProfileSectors").chosen({ width: "100%" }).change(function(){
alert('some function to be executed after you choose the element');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" rel="stylesheet"/>

<select name="SelectedCities" id="userProfileSectors" style="width: 200px; height: 150px; " multiple="multiple"><option value="True">Brussels</option>
<option value="False">Antwerpen</option>
<option value="False">Gent</option>
<option selected="selected" value="True">Berlin</option>
<option selected="selected" value="True">Tirana</option>
<option selected="selected" value="False">London</option>
</select>

在selected.jquery完成执行后运行我的脚本

2 个答案: