更改select的父li元素类 [英] changing select's parent li elements class

问题描述

我在列表项中有选择.在select的onchange中，如果selected options的值为空，我想给父li元素一个"isnotselected"类，否则，如果selected option的值不为空，我想给父li元素一个"isselected"类.如何通过jQuery做到这一点?

I have selects in list items. onchange of select, if selected options value is empty, I would like to give the parent li element a "isnotselected" class, else if selected option's value is not empty, I would like to give the parent li element a "isselected" class. How can I do this via jQuery?

<ul>
  <li>
    <select>
      <option value="">Select Value</option>
      <option value="1">Value 1</option>
      <option value="2">Value 2</option>
    </select>
  </li>
  <li>
    <select>
      <option value="">Select Value</option>
      <option value="1">Value 1</option>
      <option value="2">Value 2</option>
    </select>
  </li>
  <li>
    <select>
      <option value="">Select Value</option>
      <option value="1">Value 1</option>
      <option value="2">Value 2</option>
    </select>
  </li>
  <li>
    <select>
      <option value="">Select Value</option>
      <option value="1">Value 1</option>
      <option value="2">Value 2</option>
    </select>
  </li>
</ul>

推荐答案

一种不要重复自己的方法:

var classes = {
    'true': 'isselected',
    'false': 'isnotselected'
};

$('select').change(function () {
     var sel = !!$(this).val(); // convert value into true/false
     $(this).closest('li').addClass(classes[sel]).removeClass(classes[!sel]);
});

演示: http://jsfiddle.net/B5Q7m/

或者以相同的方式，您可以依赖于false转换为0而'true'转换为1的事实，尽管classes声明不具有描述性:

Alternatively but in the same style, you can rely on the fact that false converts to 0 and 'true' converts to 1, although the classes declaration isn't as descriptive:

var classes = ['isnotselected', 'isselected'];

$('select').change(function () {
    var sel = !!$(this).val();
    $(this).closest('li').addClass(classes[+sel]).removeClass(classes[+(!sel)]);
});

---

注意:可以使用.parent()代替.closest('li')，但是.closest通常是更安全的选择，以防以后您决定将<select>包装在另一个元素中

---

Note: .parent() can be used in place of .closest('li'), but .closest is usually the safer option in case you decide to wrap the <select>s in another element later on.

这篇关于更改select的父li元素类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！