JQuery 下一节课答案

【问题标题】：JQuery next classJQuery 下一节课
【发布时间】：2013-04-17 12:51:06
【问题描述】：

我需要启用禁用的下拉菜单并从 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 兼容？

【问题讨论】：

升级到 jquery 1.9 时也包括迁移 js 文件。它包括所有已删除的功能并在您使用某个功能时记录警告消息，以便您知道要替换哪些功能。然后一旦完成，再次删除迁移 js。

标签： javascript jquery html

【解决方案1】：

不要使用.removeAttr('disabled')，而是使用.prop('disabled', false)。 .prop 自 1.6 起被用作更新元素 properties 的方法，但在 1.7 之后更是如此

【讨论】：

【解决方案2】：

你应该是这样的

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

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

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

【讨论】：

【解决方案3】：

.live() 函数在 jQuery 1.7 中被弃用并在 jQuery 1.9 中被移除。

您可以改用.on()：

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

当使用.on() 时，使用要为其调用处理程序的元素的最近祖先是最有效的。因此，您可以使用<ul> 元素，而不是使用document.body。不过，如果该元素具有“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 所建议的那样。

【讨论】：