Question

我正在使用getElementsByClassName为多个元素提供资金并改变他们的风格，但是我发现getElementsByClassName不是跨浏览器兼容的。你能帮我简化这段代码吗？我更喜欢本机JS实现，但jQuery可能会更好，所以它也很好....

那么我怎样才能循环遍历元素，这取决于个别类改变某些风格....

var ele = document.getElementsByClassName("dhSliderMobile"); 

    for (var i = 0; i < ele.length; i++) {
        if (ele[i].style.display === "block") {
            ele[i].style.display = "none";

            var div = document.getElementsByClassName("dhImageInfoDiv");
            var div1 = document.getElementsByClassName("dhSeriesInfoDiv");
            for (var j = 0; j < div.length; j++) {
                div[j].style.right = 0 + "px";
                div1[j].style.right = 0 + "px";

            }
        }
        else {
            ele[i].style.display = "block";

            var div = document.getElementsByClassName("dhImageInfoDiv");
            var div1 = document.getElementsByClassName("dhSeriesInfoDiv");

            for (var j = 0; j < div.length; j++) {
                div[j].style.right = 40 + "px";
                div1[j].style.right = 40 + "px";
            }
        }
    }



    var ele = document.getElementsByClassName("dhSliderDesktop");    
    for (var i = 0; i < ele.length; i++) {
        if (ele[i].style.display === "block") {
            ele[i].style.display = "none";

            var div = document.getElementsByClassName("dhImageInfoDiv");
            var div1 = document.getElementsByClassName("dhSeriesInfoDiv");
            for (var j = 0; j < div.length; j++) {
                div[j].style.right = 0 + "px";
                div1[j].style.right = 0 + "px";

            }
        }
        else {
            ele[i].style.display = "block";

            var div = document.getElementsByClassName("dhImageInfoDiv");
            var div1 = document.getElementsByClassName("dhSeriesInfoDiv");

            for (var j = 0; j < div.length; j++) {
                div[j].style.right = 20 + "px";
                div1[j].style.right = 20 + "px";
            }
        }
    }

Answer 1

尝试这样，可以通过.使用类选择器，在此处阅读更多内容：Class Selector

 var multipleClassresults= $('.yourClass1, .yourClass2');

 var singleClassResults= $('.yourClass1');

如果你想循环结果，那就这样做

$.each(multipleClassresults,function(index, item){
    if($(item).hasClass('yourClassToCheck'))
    {
     //then do some styling 
    }
});

Answer 2

您可以选择类名如下的元素。您可以在here

上阅读有关类选择器的更多信息

elem = $('.classname'); //elements having class `classname`

elem = $('.classname1, .classname2'); //elements  having class `classname1` or  `classname2`

Answer 3

使用jQuery进行CSS更改。如果他们满足你的柜台条件做一些事情，你也可以使用事件处理程序。无论如何，这将以正确的方式指出你（我希望）

$('.dhImageInfoDiv, .dhSeriesInfoDiv').css({
  'margin-left':'40px',
  'display':'block' 
})

亲切的问候，中号

Answer 4

我认为，您的代码将与jQuery一样

$('.dhSliderMobile').toggle(function() {
    if ($(this).is('visible')) { // if is visible
        $('.dhImageInfoDiv, .dhSeriesInfoDiv').css('right', '40px');
        return false; // then set invisible
    }else{
        $('.dhImageInfoDiv, .dhSeriesInfoDiv').css('right', 0);
        return true; // set visible
    }
});

More info about jQuery.toggle

通过两个类获取元素

4 个答案: