Question

我今天遇到了一个非常奇怪的问题。

以下代码不起作用：

export default function initButtonControl(container) {
    const find = (container === $ ? $ : container.find);

    find('button').on('click', function() {
        console.log('hey!');
    });
}
initButtonControl($('.container'));

我收到错误：

未捕获的TypeError：无法在find
中读取未定义的属性“length”

但是这个人做了这个工作：

export default function initButtonControl(container) {
    const buttons = (container === $ ? $('button') : container.find('button'));

    buttons.on('click', function() {
        console.log('hey!');
    });
}
initButtonControl($('.container'));

为什么？

在这两种情况下，我有container !== $。 $指的是jQuery。

希望你能帮助我理解，谢谢：）

Answer 1

两个问题：

检测container = $('.container')没有产生匹配的方法与container === $无关。而是检查jQuery对象的大小：container.length === 0

[在您上次修改问题之后，此点已不再相关：您已移除$('.container')，现在只需告诉我们container === $可以为真。 < / p>
jQuery函数find需要jQuery对象 - 应该在其上执行查找 - 作为this值，否则它将无法正常运行。但是当您复制该函数引用并在没有this的情况下调用它时，执行将失败。这就是你的情况。您可以使用bind来解决此问题。

const container = $('.container');
const find = (container.length ? container.find.bind(container) : $);

find('button').on('click', function() {
    console.log('hey!');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <button>click me</button>
</div>

奇怪的句法行为

1 个答案: