Question

我正在尝试使用JQuery改变占位符的样式。我能够像这样一次轻松地一次完成一个元素：

<script type="text/javascript">
$(document).ready(
  function() {
    var cabinetFilter = document.getElementById("cabinetFilter");
    var value = cabinetFilter.options[cabinetFilter.selectedIndex].value;

    if (value == "") {
      $(cabinetFilter).css('font-style', 'italic');
      $(cabinetFilter).css('color', '#636c72');
      $(cabinetFilter).children().css('font-style', 'normal');
    } else {
      $(cabinetFilter).css('font-style', 'normal');
      $(cabinetFilter).css('color', 'black');
      $(cabinetFilter).children().css('font-style', 'normal');
    }
  }
);
</script>

这仅适用于一个select元素，但我的页面包含3或4。我知道您可以使用以下方法定位所有selects：

<script type="text/javascript">
$(document).ready(
  function() {
    $('select').css('font-style', 'italic');
  }
);
</script>

有问题的选择元素如下：

<select class="form-control" id="cabinetFilter" name="cabinetFilter" th:value="${cabinetFilter}"
                                            onchange="this.form.submit()">
                                            <option value="">Search Cabinet</option>
                                            <option th:each="cabinet : ${cabinets}" th:value="${cabinet.id}" 
                                                th:text="${cabinet.toString()}" th:selected="${cabinet.id == cabinetFilter}">
                                                </option>
                                        </select>

我如何适应第二个示例，并告诉它仅在选择第一个元素时才应用样式？

Answer 1

根据您的第一个示例和要求，我假设您要迭代select个DOM元素的数量，并检查是否选择了一个值。

您可以使用each loop来做到这一点：

function checkSelectElements()
{
    $('select').each(function (index, value){
      if($(this).val()===""){ 
        $(this).css('font-style', 'italic');
        $(this).css('color', '#636c72');
        $(this).children().css('font-style', 'normal');   
      }
      else
      {
        $(this).css('font-style', 'normal');
        $(this).css('color', 'red');
        $(this).children().css('font-style', 'normal');    
      }
  });
}

这里是a working example。

Answer 2

我看到您正在使用Thymeleaf，如果这样，那么您也可以使用conditional styling，而无需任何其他JavaScript。

通过添加th:style="${cabinetFilter==''} ? 'font-style:italic' : 'font-style:normal'"来更改选择（我在这里假设您的默认值是一个空字符串，如果为NULL，则应检查${cabinetFilter==NULL}。

<select class="form-control" id="cabinetFilter" name="cabinetFilter" onchange="this.form.submit()"
    th:value="${cabinetFilter}" 
    th:style="${cabinetFilter==''} ? 'font-style:italic' : 'font-style:normal'" >
        <option value="">Search Cabinet</option>
        <option 
            th:each="cabinet : ${cabinets}" 
            th:value="${cabinet.id}" 
            th:text="${cabinet.toString()}" 
            th:selected="${cabinet.id == cabinetFilter}">
        </option>
</select>

别忘了添加一些CSS来将选项文本恢复为非斜体：

<style>
    select > option{
        font-style: normal;
    }
</style>

Answer 3

如果您希望在某人从select语句更改选项时更改它。您可以做的是：

// When a select statement changes check if the option selected has a value of ""
// If so give it an italic style. If not, set it to normal
$(document).on('change', 'select', function() {
    if($(this).val() == '') {
        $(this).css({'font-style':'italic'});
    } else {
        $(this).css({'font-style':'italic'});
    }
});

如果您希望从页面加载中获取它，我推荐Alon Adler的答案。

Answer 4

我建议将CSS类用于任何样式。这就是“样式表”的用途。然后，只有一个函数可以从每个选择中删除该类，然后将其添加回选择了第一个选项的那些类。（如果需要，您可以使用:first-child代替[value=""]。

function updateSelects() {
  $('select').removeClass('unselected');
  $('select').has('option[value=""]:selected').addClass('unselected');
}
$('select').on('change', updateSelects);
updateSelects();

.unselected {
  font-style: italic;
  color: #636c72;
}

.unselected option {
  font-style: normal;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option value="">Select something</option>
  <option value="1">Something</option>
</select>
<select>
  <option value="">Select something</option>
  <option value="1">Something</option>
</select>
<select>
  <option value="">Select something</option>
  <option value="1">Something</option>
</select>
<select>
  <option value="">Select something</option>
  <option value="1">Something</option>
</select>

jQuery：仅当所选元素是第一个元素（占位符）时，将所有选择元素的样式设置为斜体

4 个答案: