如何为多个元素添加Class?

2024-05-22

我正在使用这段 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>

我已经尝试解决这个问题几个小时了,所以我想我应该问问是否有人可以为我指出正确的方向。提前致谢。


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

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

然后在你的JS中:

$('.item').addClass('col1');
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何为多个元素添加Class? 的相关文章

  • javascript 选择自定义光标 (svg)

    我正在动态地将光标更改为悬停时的本地 svg element on mouseover function this css cursor url svgs pointer svg 9 30 auto 工作正常 但我想选择该 svg 来操纵其
  • JavaScript 继承;调用和原型

    要在Javascript中实现继承 通常需要执行以下两个步骤 假设我有一个基类 Animal var Animal function name this name name 我现在想从中派生一个子类 Dog 所以我想说 var Dog fu
  • JavaScript推送函数中的动态变量

    我在 JavaScript 中使用推送功能 var chartData for var i 0 i lt 3 i chartData push date new Date year s mon s date s hr s min s sec
  • 合并 2 个大型 CSS 文件的有效方法

    我正在寻找一个可以合并 2 个大型 CSS 文件的工具 到目前为止我尝试过的所有方法 例如CSSMerge 都没有成功 其中一些只是随机删除属性 其他人则因 webkit 和 moz 等非标准属性而窒息 并给我错误 我还需要保留每条规则大小
  • 如何使用角度材料在具有可扩展行的表格中创建嵌套垫表

    我有以下数据 id c9d5ab1a subdomain wing domain aircraft part id c9d5ab1a info mimetype application json info dependent parent
  • -webkit-box-shadow 与 QtWebKit 模糊?

    当时有什么方法可以实现 webkit box shadow 的工作模糊吗 看完这篇评论错误报告 https bugs webkit org show bug cgi id 23291 我认识到这仍然是一个问题 尽管错误报告被标记为RESOL
  • 将 Firebase 云消息传递与 Windows 应用程序结合使用

    我在 Android 和 iOS 应用程序中使用 Firebase Cloud Messaging 但是我还有此应用程序的 Windows Mac OS 版本 我想保留相同的逻辑 我知道 Firebase Cloud Messaging 可
  • CSS 到底如何计算相对尺寸

    我想更好地理解某些 CSS 行为 这与具体问题无关 我只是在调试网站时遇到的 让我们在固定位置的 div 中放置一个全宽图像 div img style width 100 src https via placeholder com 150
  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo
  • 编辑第一个选项名称

    我有以下我无法访问的代码 我想要做的是将一些文本添加到现在为空的第一个选项中 诸如 选择地址 之类的文本
  • 如何停止TinyMCE删除span标签?

    在我的工作中 前一位程序员决定使用公司网站上精彩的TinyMCE 我遇到的数千个问题之一是 如果原文有的话span标签 当我按下退格键删除一行 p仅标签 全部span标签已从文本中删除 这个错误比另一个错误更具体 我可以删除anything
  • JavaScript eval("{}") 返回行为?

    根据ECMA 262 规范 http www ecma international org publications files ECMA ST Ecma 262 pdf 以下语句返回1 eval 1 eval 1 eval 1 var a
  • Vaadin 12 将对象传递给 JavaScript 函数:无法对类进行编码

    Vaadin 12 Kotlin 项目 In my myPage html我有JavaScript myObject redirectToCheckout sessionId 1111 2222 所以我需要调用javaScript函数red
  • 用于选择特定 div 中具有特定类的锚元素的 jQuery 选择器是什么

    我有一些这样的代码 我想选择每个 a 带有类的标签status在 div 中foo div a class status a div 你可以这样做 foo find status a
  • 使用javascript动态更新css内容

    需要将 css 更新为动态值 我不确定最好的方法是什么 div style zoom 1 div 缩放级别将根据窗口大小调整触发 应用程序将相应缩放 我将此应用程序加载到 cordova 中并让它在 iPAD 中运行 然后我意识到需要使用
  • 使用 Jade 评估自定义 javascript 方法 (CircularJSON)

    我想通过 Jade 将一个对象解析为客户端 JavaScript 通常这会起作用 script var object JSON parse JSON stringify object but my object is circular ht
  • 使用 CSS 折叠和展开元素

    我正在尝试构建一个页面 加载时仅可见标题 并且 当用户单击标题时 每个标题下方的表格会在隐藏和显示状态之间切换 我的限制是只能在 CSS 中执行此操作 这是我到目前为止想到的 https jsfiddle net Argoron c1ypx
  • 使用 next.js 进行服务器端渲染与传统 SSR

    我非常习惯 SSR 意味着页面得到完全刷新并从服务器接收完整 HTML 的方法 其中根据后端堆栈使用 razor pub other 进行渲染 因此 每次用户单击导航链接时 它只会向服务器发送请求 整个页面将刷新 接收新的 HTML 这就是
  • 有没有办法使用 ko.observableArray 作为地图?

    有没有办法使用ko observableArray http knockoutjs com documentation observableArrays html像地图 字典一样 例如 var arr ko observableArray
  • 没有输入的 jQuery 日期选择器

    我有一个相当复杂的网络应用程序 我想向其中添加一些日期选择 UI 我遇到的问题是我无法从文档中弄清楚如何真正控制日期选择器的出现方式和时间 不涉及任何表单元素 不 我不会添加秘密表单字段 因此简单的开箱即用方法根本行不通 我希望有人可以提供

随机推荐

  • 从 SQL 数据库获取日期时间

    我的数据库表中有一个 DateTime 记录 我编写一个查询从数据库中获取它 string command2 select Last Modified from Company Data where Company Name Descrip
  • 如何将表移动到 T-SQL 中的架构中

    我想使用 T SQL 将表移动到特定架构中 我正在使用 SQL Server 2008 ALTER SCHEMA TargetSchema TRANSFER SourceSchema TableName 如果你想搬家all表到一个新的模式
  • 使用 RestKit 对象映射空响应

    感谢在这里帮忙 https stackoverflow com questions 9743155 restkit mapping with an array of complex objects在 RestKit 邮件列表上 我已经能够解
  • 如何自定义 DataTable 列的排序

    我需要对数据表列的值进行排序 该列包含字符串 整数或混合文本 例如 数据表列包含如下值 23 18 12 store 23 store a1 1283 25 如果我使用对值进行排序Dataview sort 方法会按此顺序产生 12 128
  • jquery改变图像src

    代码与 adminLink 工作得很好 但是 itemLink 没有 我已经尝试了我能想到的一切 我想我需要一双新鲜的眼睛 我想做的就是在单击元素时更改这两个 img 的 src code document ready function H
  • 为 Promise 编写循环的正确方法。

    如何正确构造循环以确保满足以下条件承诺电话和被束缚的记录器 log res 通过迭代同步运行 蓝鸟 db getUser email then function res logger log res this is a promise 我尝
  • 使用 isdigit 表示浮点数?

    a raw input How much is 1 share in that company while not a isdigit print You need to write a number n a raw input How m
  • python-messaging 无法处理 HTTP 请求

    我正在使用下面的代码尝试使用 python messaging 发送彩信https github com pmarti python messaging blob master doc tutorial mms rst https gith
  • 将整个网页设计为 SVG 文件

    免责声明 我意识到鉴于标题的荒谬 这听起来像一个巨魔 然而 这是一个真正的问题 我的背景涉及OpenGL x86 汇编 我最近开始学习网络编程 我真的很喜欢 SVG CSS 并且想知道 为什么人们不使用 SVG 设计整个网页 Context
  • 快速检查网络速度

    我想从我的 swift 应用程序检查网络速度 我发现很多帖子描述了Reachability特别是查找连接是否可达以及是 WIFI 连接还是 WWAN 连接的方法 我的问题 是否可以检测 WWAN 的类型 2G 3G 4G 你可以用以下命令检
  • std::vector::data() 的状态是什么?

    我刚刚意识到我一直在使用std vector data 出于与 std string 的相似性 但一位同事指出它不是标准的 显然 Gcc 实现了它 但是查看它的包含文件 我发现了这样的注释 GLIBCXX RESOLVE LIB DEFEC
  • 使用 RenderTargetBitmap 的 WPF 画布区域的快照

    我想在我的应用程序中创建画布区域的快照 我使用 Visual Brush 来获取快照并使用 PngEncoder 保存相同的快照 但生成的 PNG 只是一个空的黑色图像 我不确定问题是与创建的 BitmapSource 还是 PNGEnco
  • x86 LargeAddressAware 兼容性的单元测试

    对于 win32 可执行文件 x86 我们可以设置 LargeAddressAware 标志 以便它在 x64 Windows 上运行时可以访问 4 GB 而不是仅 2 GB 的虚拟地址空间 这看起来很吸引人 然而 这也存在风险 例如参见
  • Twig dump 不打印任何内容

    我现在有点困惑 我总是像其他树枝函数一样使用树枝转储函数 但现在它完全没有输出 没有错误 异常 什么都没有 其他一切都工作正常 例如反式过滤器 dump test prints nothing layout booking chooseAr
  • .then(functionReference) 和 .then(function(value){return functionReference(value)}) 之间有区别吗?

    给定一个用于处理的命名函数Promise value function handlePromise data do stuff with data return data a 传递命名函数handlePromise作为参考 then pro
  • pandas dataframe 对列进行排序会引发索引上的 keyerror

    我有以下数据框 df peaklatency snr 0 52 99 0 0 1 54 15 62 000000 2 54 12 82 000000 3 54 64 52 000000 4 54 57 42 000000 5 54 13 7
  • 从 Presto 中的 JSON 列获取特定值

    我有一个带有 JSON 列的表points其中一行为 0 0 2 1 1 2 2 0 5 15 1 2 20 0 7 我想获取键的值 1 and 20 并将它们存储为别名 例如first and second在查询中 到目前为止我所做的是
  • Web UI 中的 .Result 出现死锁

    我正在阅读以下主题http blog stephencleary com 2012 07 dont block on async code html http blog stephencleary com 2012 07 dont bloc
  • 如何从矩形点计算旋转角度?

    我有4分1 2 3 4闭合一个矩形 这些点按以下方式排列在数组中 x1 y1 x2 y2 x3 y3 x4 y4 我遇到的问题是矩形可以旋转一定角度 如何计算原始点 灰色轮廓 和角度 我试图在 javascript css3 transfo
  • 如何为多个元素添加Class?

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