Question

我正在使用这个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但它似乎不想将类添加到同一div id中存在的多个项目，那么它正在工作。我甚至尝试将类添加到同一div类中存在的多个项而不是id。如果你能弄明白的话，任何一个都是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>

现在试图弄清楚这几个小时，所以我想我会问是否有人可以指出我正确的方向。提前致谢。

Answer 1

ID应该是唯一的。请尝试添加类，例如“item”：

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

然后在你的JS中：

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

Answer 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

Answer 3

将类添加到一个div的原因是因为id应该在HTML中是唯一的。 jQuery只会在使用id选择器时返回第一个匹配的项目。你有三个选择

选项一：使用类item1而不是标识item并使用以下选择器

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

选项二：将第二个div上的id更改为item2并使用以下选择器

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

选项三：使用属性选择器（这更像是一个黑客攻击）

$('div[id="item1"]').addClass('col1');

Answer 4

每页只能有一个元素具有相同的id。 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>

Answer 5

使用类选择器而不是id：

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

这会将类'col3'添加到所有具有'toAdd'类的元素。

Answer 6

具有相同id的多个元素不是有效语法，并且jQuery $('#anyId')中的id选择器始终返回具有该id的第一个项目，而不是多个项目。

在html和jQuery类选择器<div class="blue item">中使用$('.item')代替。

如何将addClass添加到多个元素？

6 个答案: