Javascript 通过两个类获取元素

我正在使用

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

var ele=document.getElementsByClassName（“dhSliderMobile”）；
对于（变量i=0；i

您可以选择具有类名的元素，如下所示。您可以在上阅读有关类选择器的更多信息

---

尝试这样做，可以通过

使用类选择器阅读以下内容：

如果要循环结果，请执行以下操作

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

---

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

亲切问候,，

---

M

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

---

singlefoundObj

可能也会给出多个元素。因此，我如何循环元素，取决于单个类更改一些样式…@Jacob更新了答案。你可以看看我的答案。我知道它的功能和你的不完全一样。我想举一个例子来说明主要观点。

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

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

$('.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
    }
});