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でそのようになると思います

$('.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 に答える
0

jQuery で CSS の変更を行うには、そのようなものです。カウンターの条件を満たしていれば、イベント ハンドラーを使用して何かを行うこともできます。とにかく、これはあなたを正しい方向に向けるでしょう（私は願っています）

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

よろしく、M

于 2013-03-06T12:56:45.550 に答える