두 클래스로 요소 가져 오기

Question

getElementsByClassName을 사용하여 여러 요소를 재정하고 스타일을 변경했지만 getElementsByClassName은 (는) 크로스 브라우저와 호환되지 않습니다. 이 코드를 단순화하도록 도와 주시겠습니까? 나는 네이티브 JS 구현을 선호하지만, jQuery를이 될 것입니다 아마 더 나은 그래서도 잘 ....입니다

어떻게 할 수있는 I 후 개별 클래스 변경 어떤 스타일에 따라 요소를 통해 루프 ....

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

을 통해 클래스 선택에 대한 자세한 내용을보실 수 있습니다, 클래스 선택기 자세한 내용은 여기를 읽어 .를 통해 사용할 수 있습니다

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

Answer 2

클래스 이름이 아래와 같은 요소를 선택할 수 있습니다. Class Selector

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

var singleClassResults= $('.yourClass1'); 

하면 결과는 다음과 같이 할 루프를 원하는 경우 :이 같은 시도 here

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

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

Answer 3

jQuery를 사용하여 CSS를 변경하려면 어떻게해야합니까? 그들이 이벤트를 처리하기 위해 카운터의 조건을 충족 시키면 이벤트 핸들러를 사용할 수도 있습니다. 어쨌든이 (I 희망) 올바른 방법으로

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

에 그렇게 될 것이라고 생각 M 당신을 가리 킵니다