-2

我正在使用这段 javascript 向多个元素添加一个类。我试图引用多个 div 并向它们添加类。它仅适用于第一个。

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>

几个小时以来一直在试图解决这个问题，所以我想我会问是否有人能指出我正确的方向。提前致谢。

4

6 回答 6

5

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

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

然后在你的 JS 中：

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

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

选项一：代替 iditem1使用一个类item并使用以下选择器

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

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

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

选项三：使用属性选择器（这更像是一种技巧）

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

使用class而不是id进行操作：

IE

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

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>
于 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 回答