-2

このJavaScriptのビットを使用して、複数の要素にクラスを追加しています。複数のdivを参照してそれらにaddClassを追加しようとしています。それは最初のものでのみ機能します。

Javascript

<script>            
            $(function(){           
            if ( $(window).width() < 230 ) {
              $('#item1').addClass('col1'); //max-width 80px

            }
            else 
                if ( $(window).width() >= 230 && $(window).width() < 330 ) {
              $('#item1').addClass('col2'); //max-width 180px

            }
            else 
           {
              $('#item1').addClass('col3'); //max-width 280px

            }

          });
        </script>

ページに＃item1が1つしかない場合は機能しますが、同じdividに存在する複数のアイテムにクラスを追加したくないようです。idではなく同じdivクラスに存在する複数のアイテムにクラスを追加しようとしました。あなたがそれを理解することができれば、どちらかがmwのための良い解決策になるでしょう。

私のHTMLコードは 

    <div id="item1" class="blue">
<label for="amount">Price range:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
<div class="slider-range"></div>
</div>

<div id="item1" class="blue">
<label for="amount2">Price range:</label>
<input type="text" id="amount2" style="border:0; color:#f6931f; font-weight:bold;"/>
<div class="slider-range2"></div>
</div>

数時間これを理解しようとしていたので、誰かが私を正しい方向に向けることができるかどうかを確認するように頼むと思いました。前もって感謝します。

4

6 に答える 6

5

IDは一意である必要があります。代わりに、「item」のようなクラスを追加してみてください。

<div class="blue item">
    ...etc...
</div>

次に、JSで：

$('.item').addClass('col1');
于 2013-01-31T16:11:13.223 に答える
3

クラスが1つのdivにのみ追加される理由は、IDがHTMLで一意であると想定されているためです。jQueryは、IDセレクターを使用する場合にのみ最初に一致したアイテムを返します。3つのオプションがあります

オプション1：idの代わりにitem1クラスitemを使用し、次のセレクターを使用します

$('.item').addClass('col1');

オプション2：2番目のdivのIDをに変更しitem2、次のセレクターを使用します

$('#item1, #item2').addClass('col1');

オプション3：属性セレクターを使用します（これはハックのようなものです）

$('div[id="item1"]').addClass('col1');
于 2013-01-31T16:13:53.297 に答える
2

操作のclass代わりに使用します。id

すなわち

var newClass = '';
if ( $(window).width() < 230 ) {
    newClass = 'col1';
}
else if ( $(window).width() >= 230 && $(window).width() < 330 ) {
    newClass = 'col2';
}
else {
    newClass = 'col3';
}

$('.blue').addClass(newClass); // will apply to all elements with class blue
于 2013-01-31T16:11:17.777 に答える
1

id1ページに同じ要素を持つことができるのは1つの要素だけです。ID一意である必要があります。

すべての<div id="item1">タグを<div class="item1">に変更すると、jQueryは次のようになります。

        <script>            
            $(function(){           
            if ( $(window).width() < 230 ) {
              $('.item1').addClass('col1'); //max-width 80px

            }
            elseif ( $(window).width() >= 230 && $(window).width() < 330 ) {
              $('.item1').addClass('col2'); //max-width 180px

            }
            else 
           {
              $('.item1').addClass('col3'); //max-width 280px

            }

          });
        </script>
于 2013-01-31T16:11:15.240 に答える
1

idの代わりにクラスセレクターを使用します。

$('.toAdd').addClass('col3');

これにより、クラス'toAdd'を持つすべての要素にクラス'col3'が追加されます。

于 2013-01-31T16:11:20.493 に答える
1

同じIDを持つ複数の要素を持つことは有効な構文ではなく、jQueryのIDセレクターは$('#anyId')常にそのIDを持つ最初のアイテムを返し、複数のアイテムを返すことはありません。

代わり<div class="blue item">に、htmlおよびjQueryクラスセレクターで使用してください。$('.item')

于 2013-01-31T16:11:34.023 に答える