JQuery下一个类

JQuery next class

本文关键字：下一个 JQuery      更新时间：2023-09-26

我需要启用禁用的下拉列表并从json更改值。当我的程序具有<select></select><select></select>时我的意思是，连续选择可以很好地工作，但当两者之间有元素时就不行了。

索引页代码：

<ul>
 <li>
  <label>Item 1</label>
  <select name="item1" id="item1" class="update">
   <option value="">Select Item1</option>
   <option value="1">1</option>
   <option value="2">2</option>
  </select>
 </li>
 <li>
  <label>Item 2</label>
  <select name="item2" id="item2" class="update" disabled="disabled">
   <option value="">Select Item2</option>
   /*output based on item1*/
  </select>
</li>
<li>
 <label>Item 3</label>
 <select name="item3" id="item3" class="update" disabled="disabled">
  <option value="">Select Item3</option>
  /*output based on item2*/
 </select>
</li>

在索引(以及jquery(中加载的脚本：

var formObject = {
    run : function(obj) {
        if (obj.val() === '') {
            obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true);
        } else {
            var id = obj.attr('id');
            var v = obj.val();
            jQuery.getJSON('/test/mod/update.php', { id : id, value : v }, function(data) {
                if (!data.error) {
                    obj.next('.update').html(data.list).removeAttr('disabled');
                } else {
                    obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true);
                }
            });
        }
    }
};
$(function() {
    $('.update').live('change', function() {
        formObject.run($(this));
    });
});

我知道我需要更换

obj.next('.update').html(data.list).removeAttr('disabled');

但我想不通。

这也适用于jquery 1.6.4，但不适用于1.9.1。我需要更改哪个部分来更新代码以与最新的jquery兼容？

不要使用.removeAttr('disabled')，而是使用.prop('disabled', false)。.prop从1.6开始就被认为是更新元素属性的一种方法，但在1.7之后更受欢迎

你应该有这样的

更换obj.next('.update').html(data.list).removeAttr('disabled');带有

 obj.parent().next().children().removeAttr('disabled');

jsfiddle：http://jsfiddle.net/habo/7vMw8/

.live()函数在jQuery 1.7中已弃用，在jQuery 1.9中已删除。

您可以使用.on()代替：

$(document.body).on('change', '.update', function() {
    formObject.run($(this));
});

当使用.on()时，使用要调用处理程序的元素的最近祖先是最有效的。因此，您可以不使用document.body，而使用<ul>元素。不过，如果该元素具有"id"属性，则会更容易。

为了处理不是兄弟的<select>元素，我建议改变以下情况：

obj.nextAll('.update').html(...
obj.next('.update').html(...

对此：

obj.closest('li').nextAll().find('.update').html(...
obj.closest('li').next().find('.update').html(...

当然，您也应该使用.prop()来启用/禁用，正如@Explosion Pills所建议的那样。

相关文章：