JavaScript按钮切换代码报错：$(...).querySelector不是函数，求正确写法

问题 #

我写了一段JavaScript的if..else语句，用来根据订单状态隐藏或显示两个按钮，但现在遇到了报错：Uncaught TypeError: $(...).querySelector is not a function。就算把querySelector语句直接放在if/else分支里，不包裹自执行函数，这个报错还是会出现。想请教下正确的写法应该是什么？

我的代码如下：

/* Toggle Revert or Complete buttons based on order status */
if (!status1 || status2 == "wc-completed" ) {
    // Status check working
    (function() {
        $(document.getElementById(idDIVOrder)).querySelector('form.complete-order-cred').style.visbility = "hidden";
        $(document.getElementById(idDIVOrder)).querySelector('form.revert-order-cred').style.visbility = "show";
    })();
} else if (!status1 || status2 == "wc-processing" ) {
    (function() {
        $(document.getElementById(idDIVOrder)).querySelector('form.revert-order-cred').style.visbility = "hidden";
        $(document.getElementById(idDIVOrder)).querySelector('form.complete-order-cred').style.visbility = "show";
    })();
} else {
    console.log("Hide or display buttons not working! Order has a status of " + status1 + " and " + status1);
}

解决方案 #

问题根源 #

你遇到的报错核心原因很明确：$(document.getElementById(idDIVOrder))返回的是jQuery对象，而querySelector是原生DOM元素专属的方法，jQuery对象并没有这个属性，直接调用自然会抛出类型错误。

另外代码里还有几个容易忽略的小问题：

1. CSS属性拼写错误：visbility应该是visibility；
2. visibility的有效值里没有"show"，正确的显示值是"visible"；
3. else分支的日志输出重复了status1，应该是status1 + " and " + status2；
4. 包裹代码的自执行函数完全多余，没必要额外套一层匿名函数执行。

修正后的两种写法 #

写法一：纯原生DOM操作（不依赖jQuery）

既然你已经用了原生的document.getElementById，可以直接基于原生DOM API完成操作，不需要再额外套jQuery：

/* Toggle Revert or Complete buttons based on order status */
const orderDiv = document.getElementById(idDIVOrder);
if (!status1 || status2 === "wc-completed") {
    orderDiv.querySelector('form.complete-order-cred').style.visibility = "hidden";
    orderDiv.querySelector('form.revert-order-cred').style.visibility = "visible";
} else if (!status1 || status2 === "wc-processing") {
    orderDiv.querySelector('form.revert-order-cred').style.visibility = "hidden";
    orderDiv.querySelector('form.complete-order-cred').style.visibility = "visible";
} else {
    console.log("Hide or display buttons not working! Order has a status of " + status1 + " and " + status2);
}

这里我把重复获取的orderDiv抽成了变量，避免多次DOM查询，性能更优。

写法二：用jQuery的选择器语法（如果项目依赖jQuery）

如果你的项目已经引入了jQuery，直接用jQuery的语法会更简洁：

/* Toggle Revert or Complete buttons based on order status */
const $orderDiv = $('#' + idDIVOrder);
if (!status1 || status2 === "wc-completed") {
    $orderDiv.find('form.complete-order-cred').css('visibility', 'hidden');
    $orderDiv.find('form.revert-order-cred').css('visibility', 'visible');
} else if (!status1 || status2 === "wc-processing") {
    $orderDiv.find('form.revert-order-cred').css('visibility', 'hidden');
    $orderDiv.find('form.complete-order-cred').css('visibility', 'visible');
} else {
    console.log("Hide or display buttons not working! Order has a status of " + status1 + " and " + status2);
}

这里用$('#' + idDIVOrder)直接通过ID选择元素，用find()方法代替原生的querySelector，用css()方法设置样式，完全符合jQuery的使用逻辑。

内容的提问来源于stack exchange，提问作者Wallace L.