使用 jQuery 使用 if 语句和 addClass 隐藏 div答案

【问题标题】：use jQuery to hide div with if statement and addClass使用 jQuery 使用 if 语句和 addClass 隐藏 div
【发布时间】：2013-04-05 15:13:44
【问题描述】：

我有一个通过插件生成的 div，我想在 disabled=true 时隐藏它。在阅读了关于 SO 的帖子后，我想也许我可以使用 .attr 找到 disabled=true ，然后 addClass 用 CSS display: none 隐藏它。我无法编辑插件或源代码，所以我希望我可以通过我们的 CMS 从前端执行此操作。我是 jQuery 初学者，所以这可能是不可能的？

I want to hide the disabled arrows in the carousel at the bottom of this page。插件生成后的 HTML 是这样的：

        <div class="jcarousel-prev jcarousel-prev-horizontal jcarousel-prev-disabled jcarousel-prev-disabled-horizontal" style="display: block;" disabled="true"></div>

我已将此代码添加到 CMS，但它无法正常工作。我在控制台中看不到任何错误；这是正确的方法吗？我的语法有问题吗？

        if ($('div.jcarousel-prev.jcarousel-prev-horizontal.jcarousel-prev-disabled.jcarousel-prev-disabled-horizontal').attr('disabled', true)){
            $(this).addClass("arrow");
        }

提前感谢您的帮助。

【问题讨论】：

标签： jquery if-statement addclass

【解决方案1】：

:disabled 选择器不适用于除表单字段之外的任何元素。在表单以外的任何东西上使用它可能有点不标准。使用“true”的值甚至更不标准，它也应该是“disabled”（参见Correct value for disabled attribute）。因此，您编写的代码需要使用选择器[disabled="true"]，而不是使用:disabled。

您的选择器可能不需要使用整个类列表——列表中的最后一个类可能就是您需要定位的全部。

但是，我会简单地将 CSS 用于您想要做的事情。不要在样式表中使用 arrow 类，而是将其替换为 .jcarousel-prev-disabled-horizontal。

如果您仍然想通过 JavaScript 走“禁用”路线，请使用以下内容，这也将取代对 if 语句的需求：

$('.jcarousel-prev-disabled-horizontal[disabled="true"]').addClass('arrow');

【讨论】：

这在我本地尝试时有效，但当我将其插入 CMS 时，该类未应用于 div。
如果我在浏览器的控制台中输入 JavaScript 行，它对我有用。但是您似乎还有其他 JavaScript 错误，因此如果您将该行添加到文件中并重新加载页面，它可能因此没有执行。
当然，这需要进入 $(document).ready() 函数。
是的，它在 $(document).ready() 函数中...虽然我无法修复那些其他脚本错误，所以现在这可能是一项不可能完成的任务。无论如何都将您的答案标记为正确，因为它在本地工作。这不是我第一次尝试在此站点上执行脚本时遇到问题。

【解决方案2】：

您的if() 语句实际上是在设置div 元素的属性，而不是检查其状态。您应该按如下方式更新您的代码：

if ($('div.jcarousel-prev.jcarousel-prev-horizontal.jcarousel-prev-disabled.jcarousel-prev-disabled-horizontal').attr('disabled'))
{
            $(this).addClass("arrow");
}

【讨论】：

感谢您指出这一点。无论哪种方式，div 都将具有 disabled 属性，因此我必须在应用该类之前检查它是 true 还是 false。如果它是真的，我只想申请类。

【解决方案3】：

是的，您实际上只是设置了 disabled 属性

你需要检查元素是否被禁用

.is(':disabled')

【讨论】：

【解决方案4】：

试试这个，

$(document).ready(function(){
    if ($('.div.jcarousel-prev .jcarousel-prev-horizontal .jcarousel-prev-disabled .jcarousel-prev-disabled-horizontal').is(':disabled')){
        $(this).addClass("arrow");
    }
   });

【讨论】：

另外，添加一个类可能不起作用，因为有一个应用display:block的内联样式
@roballen，即使样式不起作用，当我的脚本工作时，我仍然应该看到箭头被添加到类列表中，不是吗？
是的，您应该会看到该课程已添加到课程列表中。如果您不是，则发生以下三件事之一：1）您的定位规则错误。加载页面后，通过在 Firebug 中输入您的定位规则（$('.div....) 位）对此进行测试。如果您在控制台中返回一个看起来正确的对象，那么您就设置好了。 2）您在创建对象之前运行脚本。通过将脚本放在 </body> 标记之前的页脚中来测试这一点，看看会发生什么。 3）您的代码与其他代码同时运行并且被覆盖。请参阅 #2 进行修复。

【解决方案5】：

你需要比较而不是赋值：

if ($('div.jcarousel-prev.jcarousel-prev-horizontal.jcarousel-prev-disabled.jcarousel-prev-disabled-horizontal').attr('disabled')) {
    $(this).addClass("arrow");
}

【讨论】：

属性总是字符串，所以在这种情况下 if 条件总是为真，除非它是一个空字符串。这可能会导致奇怪的结果。