向 HTML 元素添加属性导致 attr 不是函数答案

【问题标题】：Adding attribute to HTML element causing attr is not a function向 HTML 元素添加属性导致 attr 不是函数
【发布时间】：2016-04-04 11:19:31
【问题描述】：

我有一个 ID 为 containerButtons 的 HTML 元素，其中有多个 labels 和 div：

<div class="button-grp" id="containerButtons">
    <label>Selector 1</label>
    <label>Selector 2</label>
    <label>Selector 3</label>
    <div class="time-container">
        <input type="number" min="0" max="24" step="1" value="00" id="time-hour" disabled="disabled">
        <span>:</span>
        <input type="number" min="0" max="60" step="1" value="00" id="time-minutes" disabled="disabled">
    </div>
</div>

上面是通过buttons.js文件中的一个JS函数创建的。

buttons.js：

function ButtonsPanel() {

    var that = this;
    this.buttonsEl = document.createElement('div');

    var baseBtn = d3.select(this.buttonsEl);

    var containerBtns = baseFilter.append('div')
        .classed({'button-grp': true})
        .attr({id:'containerButtons'});


    var tmp = containerBtns.append('div')
        .classed({'time-container': true});

    tmp.append('input')
        .attr({type: 'number', min: '0', max: '24', step:'1', value:'00', id:'time-hour', 'disabled': 'disabled'});

    tmp.append('span')
        .text(':');

    tmp.append('input')
        .attr({type: 'number', min: '0', max: '60', step:'1', value:'00', id:'time-minutes', 'disabled': 'disabled'});

    this.timeInputs = tmp;

    var timeHours = this.timeInputs[0][0].children[0];
    // returns <input type="number" min="0" max="24" step="1" value="00" id="time-hour" disabled="disabled">
    var timeMins = this.timeInputs[0][0].children[2];
    // returns <input type="number" min="0" max="60" step="1" value="00" id="time-minutes" disabled="disabled">

}

在buttons.js 中，我有一个在加载toggleVisability 时调用的方法：

ButtonsPanel.prototype.toggleVisability = function() {

    var that = this;

    this.visabilityApply('#containerButtons', function(num) {
        if (!num) {
            alert(that.timeInputs[0][0].children[0]);
            that.timeInputs[0][0].children[0].attr({'disabled': true});
        }
        else {
            alert(that.timeInputs[0][0].children[0]);
            that.timeInputs[0][0].children[0].attr({'disabled': null});
        }
    });
};

以上，我得到错误：

TypeError: that.timeInputs[0][0].children[0].attr is not a function

但是，如果我申请：

that.timeInputs.attr({'disabled': true});

以上工作正常，但是，我想切换输入字段上的禁用属性。我正在使用 jQuery。

【问题讨论】：

使用 jQuery，这段代码看起来会好很多，也更容易理解。我可以看到你也标记了 jQuery。你想用吗？
请为您的代码库创建小提琴，这会很好理解:-)
@TusharGupta - 我在项目中使用 jquery，虽然在文件中没有那么多。

标签： javascript jquery html this

【解决方案1】：

attr() 是一个 jQuery 函数，因此需要在 jQuery context 上调用。

在你的情况下：

that.timeInputs[0][0].children[0]

返回一个不公开 attr() 函数的原生 DOM 元素，因此会出现错误（而 that.timeInputs 仍在引用 jQuery 上下文）。

试试这个：

$(that.timeInputs[0][0].children[0]).attr({'disabled': true});

【讨论】：

【解决方案2】：

如果你仍然想使用 Javascript，你可以使用setAttribute()like

that.timeInputs[0][0].children[0].setAttribute("disabled", "true");

【讨论】：

【解决方案3】：

去掉括号{}在jquery中包裹变量

$(that.timeInputs[0][0].children[0]).attr('disabled': true)

【讨论】：