1

我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";
            }
        }
    }
4

4 回答 4

2

试试这样，类选择器可以通过. 在这里阅读更多来使用： 类选择器 

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

 var singleClassResults= $('.yourClass1');

如果你想循环结果然后这样做

$.each(multipleClassresults,function(index, item){
    if($(item).hasClass('yourClassToCheck'))
    {
     //then do some styling 
    }
});
于 2013-03-06T12:45:18.233 回答
1

您可以选择具有如下类名称的元素。您可以在此处阅读有关类选择器的更多信息

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

elem = $('.classname1, .classname2'); //elements  having class `classname1` or  `classname2`
于 2013-03-06T12:44:51.507 回答
0

使用 jQuery 进行 CSS 更改就是这样。如果它们满足您的计数器的条件，您也可以使用事件处理程序来做一些事情。无论如何，这将为您指明正确的方向（我希望）

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

亲切的问候，M

于 2013-03-06T12:56:45.550 回答
0

我认为，您的代码将与 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
    }
});

关于 jQuery.toggle 的更多信息

于 2013-03-06T12:58:24.750 回答