获取两个类的元素

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

来源

2013-03-06 Jacob

尝试这样，类选择可以通过.读到这里可以使用更多：Class Selector

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

var singleClassResults= $('.yourClass1');

如果要循环的结果的话，做这样的

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

来源

2013-03-06 12:45:18

'''singlefoundObj'''也可以给出多个元素。 – 2013-03-06 12:50:09

@MuratÇorlu更新了合适的变量名称：p谢谢 – 2013-03-06 12:51:01

您可以选择具有类名称的元素，如下所示。你可以阅读更多关于类选择了here

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

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

来源

2013-03-06 12:44:51 Adil

那么我怎样才能循环通过元素取决于个别班级变化一些风格.... – Jacob 2013-03-06 12:52:06

@Jacob更新了答案。你可以检查我的答案。 – 2013-03-06 12:55:06

用jQuery来做CSS改变就像那样。你也可以使用事件处理程序，如果他们符合你的柜台的条件做一些事情。不管怎么说，这将指向您在正确的方式（我希望）

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

亲切的问候，中号

来源

2013-03-06 12:56:45

我想，你的代码将像使用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

来源

2013-03-06 12:58:24

这工作正常，除了右边距！ – Jacob 2013-03-06 13:03:08

我知道它与你的功能不完全相同。我想举一个例子来说明你的主要想法。 – 2013-03-06 13:06:54

你也许知道为什么这不起作用？ – Jacob 2013-03-06 13:12:32

获取两个类的元素

回答

相关问题