l-b-wrapper - 左页面小部件按钮

Question

我有一个由js创建的元素div，我想让它上课。我尝试getElementsByClassName('lt-label')（它有效），而不是我想检查lt-label是否有类lt-online，如果是，则页面上的另一个块是块。我的代码：

$(document).ready(function() {
    if (document.getElementsByClassName) {
        var redTags = document.getElementsByClassName('lt-label');
        if (redTags.is(".lt-online")) {
            $("#l-b-wrapper").css({
                'display': 'block'
            });
        };
    };
});

但它不起作用。哪里有错误？

我只提供链接，因为html代码很大，我无法完整显示我的问题。网站http://www.zemelushka.ru/test/

lt-label - 是一个右页面小部件按钮

l-b-wrapper - 左页面小部件按钮

Answer 1

您正在混合使用本机和jQuery，使用jQuery对象，因为document.getElementsByClassName将返回an array-like object并且它们没有jQuery方法

$(document).ready(function() {
    if ($('.lt-label').is(".lt-online")) {
        $("#l-b-wrapper").css({
            'display': 'block'
        });
    };
});

Answer 2

你有一个奇怪的原生JS和jQuery混合导致了这个问题。

getElementsByClassName返回没有is()方法的DOMElements数组。如果您使用jQuery选择元素，则可以避免问题并缩短代码：

$(function() {
    if ($('.lt-label').hasClass('.lt-online')) {
        $("#l-b-wrapper").show();
    }
});

请注意，如果找到多个.lt-label元素，则可能需要对它们进行循环，具体取决于您需要的行为。

Answer 3

要使用jquery方法，您需要jQuery Object，否则您将获得error: method is undefined。所以，你也可以用jquery包装javascript对象：

if ($(redTags[0]).is(".lt-online")) {

其中，redTags由jQuery包装即。 $()我们使用[0]作为getElementsByClassName结果数组对象的第一个元素。

但是为了简单起见，我在使用jquery时会选择简单的jQuery对象：

$('.lt-label')代替document.getElementsByClassName('lt-label');

Answer 4

正如您应该知道的，jQuery拥有自己的方法字典，它只适用于jQuery对象。并且您正在尝试将jQuery方法.is()绑定到dom对象，这会导致错误，因为.is()仅适用于jq对象。

所以这样做（创建一个jq包装器）：

$(redTags).is(".lt-online")

你可以缩短它：

$(document).ready(function() {
    var redTags = $('.lt-label');
    $("#l-b-wrapper").css({
        'display': function(){
            return redTags.is(".lt-online") ? "block" : "none";
         }
    });
});

如果您只想显示/隐藏元素，则可以使用.toggle(boolean)方法：

$(document).ready(function() {
    var redTags = $('.lt-label');
    $("#l-b-wrapper").toggle(redTags.is(".lt-online"));
});

如何通过js查找动态创建对象的类？

l-b-wrapper - 左页面小部件按钮

4 个答案: