当有多个div时，用于添加/删除特定类的Jquery单击事件
当有多个div时，可以使用jQuery的点击事件来添加或删除特定类。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">Div 1</div>
<div class="box">Div 2</div>
<div class="box">Div 3</div>
<script>
$(document).ready(function(){
$(".box").click(function(){
$(this).toggleClass("highlight");
});
});
</script>
</body>
</html>在上面的代码中，我们首先引入了jQuery库。然后定义了一个CSS样式.highlight，用于设置被点击的div的背景颜色为黄色。
接下来，使用$(document).ready()函数来确保文档加载完毕后执行代码。在这个函数内部，我们使用.click()方法为所有class为box的div元素添加点击事件。
当点击一个div时，$(this)表示当前被点击的div元素。使用.toggleClass()方法，它会在被点击的div上切换highlight类的存在。如果div已经有highlight类，则移除它；如果没有，则添加它。
这样，每次点击一个div时，它的背景颜色会在黄色和默认颜色之间切换。
推荐的腾讯云相关产品：腾讯云云服务器（CVM），产品介绍链接地址：https://cloud.tencent.com/product/cvm
相关·内容
我正在尝试添加删除播放按钮，一旦点击和视频开始播放的功能。我的问题是，我的页面上有多个视频，一旦单击播放按钮，视频开始播放，所有其他按钮也会被删除。remove(); }});
$('.video-icon').fadeToggle(300)<divid="showreel
浏览 12提问于2018-07-27得票数 0
我已经将一个click事件分配给了一个特定类的div。当单击发生时，类将从div中删除。但是，您仍然可以单击该div并触发click()事件(即使该类已被删除)。下面是一个例子：<div class="clickable">
<p>Click me&
浏览 88提问于2012-08-16得票数 23
回答已采纳
2回答
我有两个点击函数，一个函数用于在列表中添加假期，另一个函数用于从列表中删除假期。当我将假期添加到列表中时，我不希望再次单击该特定按钮.ledig-btn。如果我从列表中删除了一个特定的假期，那么我希望能够再次单击该.ledig-btn。我尝试过使用jQuery(this).off('click');及其工作，但是当我从列表中<
浏览 6提问于2018-03-09得票数 0
回答已采纳
我在页面上有一些元素，所以当我单击其中一个元素时，一个特定的子元素被移除，当该元素被重新单击时，子元素再次返回。我通常会使用一个click事件来完成这个任务，它添加了一个'.active‘CSS类，这个类可以根据变量当前使用if/else语句显示为true还是false来添加和删除。这一次的问题是，我有<em
浏览 4提问于2021-03-24得票数 0
回答已采纳
我已经创建了一个ajax加载更多的按钮，当点击时获得更多的帖子。单击该按钮时，会向其添加一个加载类，然后在所有内容都已输出时将其删除。如果按钮具有loading类，是否可以使用jQuery :not选择器来停止触发单击事件？下面是一个简短的演示 jQuery('#test_btn:not(.click
浏览 27提问于2019-01-25得票数 1
回答已采纳
我试图通过行中包含的复选框/编辑按钮从html中的表行读取ID。所有内容似乎都正确地获取了ID号，但是当我记录它时，它会输出以下内容：
我的代码有什么问题吗？当我尝试使用一个使用ID的jquery "get“时，它可以工作，但是它也会抛出一个错误，因为它试图使用ID #和"NaN”来“获取”。下面是我的表行的html：
浏览 3提问于2011-06-28得票数 2
回答已采纳
6回答
我试图隔离类并将类添加到单击的锚标记中。标签是从Wordpress循环中提取出来的。我可以编写JQuery来删除“静态”类，但是它是从div中的所有标记中移除类，而不仅仅是单击的标记，只在一瞬间添加活动类，然后在页面重新加载新的项目集时删除所有类</
浏览 4提问于2012-06-23得票数 0
回答已采纳
2回答
我正在尝试通过jQuery创建点击事件<div class="wpcart_gallery" style="text-align:center; padding-top:5px;"当页面加载的类cboxElement从div中的第一个图像中删除时，我尝试做的是当用户单击任何图像时，从该图像链接中<
浏览 0提问于2012-09-18得票数 0
回答已采纳
我们添加了一个单击事件来删除特定的记录，方法是单击每行末尾(有类.fudel)和(value="####")的标准关闭图标。删除是由PHP通过POST事件处理的。我使用启动删除的相同Jquery在发送POST后重新加载摘要DIV，以使摘要列表是当前的。
浏览 2提问于2015-09-16得票数 1
回答已采纳
doctype html><head> <title>jQuery.each demo</title> } <script src="https://code.jquery.com/jquery-1.10
浏览 4提问于2015-02-17得票数 0
回答已采纳
我需要做一个功能，显示菜单，如果用户点击特定的div。然后我需要隐藏它，如果用户点击网站上的任何地方，除了一个特定的div。</div>jQuery('.showIt').click(function(){});
jQuery(document现在我
浏览 2提问于2016-12-17得票数 2
回答已采纳
1回答
我试图在单击的列表项中添加一个类"current“(只添加”约“和”事件“，而不是实际链接的子菜单项目--”关于“和”事件“)，当单击另一个列表项时，将类”当前“添加到新单击的项中，并将其从以前单击的项中删除这段代码几乎可以工作，但是它需要两次单击
浏览 1提问于2015-09-18得票数 0
回答已采纳
我认为这应该是一个非常常见的jquery函数，但我就是找不到任何关于它的东西。
假设我有10个div，每个div在单击时都会触发一个事件。因此，当我调用div时，jquery会向div添加一个类，即“单击”。但是，当我单击另一个div时，如何设置它才能<em
浏览 0提问于2011-08-08得票数 2
回答已采纳
3回答
我有一个具有多个类名的元素，我不能对这个元素使用ID。当单击元素或单击其他任何内容时，我希望触发单独的事件。现在，当我单击元素时，由于多个类名而触发了单击其他任何事件的事件。我怎么才能解决这个问题？我计划使用JQuery。
<!="utf-8
浏览 3提问于2017-01-04得票数 2
回答已采纳
我正在尝试编写一个JavaScript或jquery函数，该函数将单击事件绑定到具有类名(Manage)的动态元素或服务器生成元素。这里的关键是删除默认的“d- to”类，以便使“管理-库存-卡”元素显示，当再次单击具有类名的元素(管理-库存)时，它应该将类“d- to”添加回“管理-库存-卡”元素以隐藏它。<
浏览 2提问于2020-03-15得票数 0
回答已采纳
我有一个卡片元素的15种颜色选择，我不想为那些颜色类创建15行脚本。我该如何修改我的代码？而课堂上的“雷克卡列表”将是它的基本风格。 color: #EFEFEF;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery</em
浏览 2提问于2019-03-05得票数 0
回答已采纳
7回答
我已经为我的页面设置了一个"onmousedown“事件处理程序。在这个页面中有一些div元素，是否可以忽略对这些div的单击，并使用正确的坐标来激发体的onmousedown事件处理程序，就好像div不存在一样？
浏览 3提问于2015-05-28得票数 12
回答已采纳
2回答
我正在尝试构建一个类似于Twitter的登录表单，但我有一个问题。当点击“登录”时，表单就会出现。当再次单击“登录”时，表单就会消失。这很好，但我希望当用户在表单外部单击时，表单也会消失。xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8
浏览 1提问于2010-10-16得票数 1
1回答
因此，当单击链接时，它会触发页面底部的查询，以hide hide div，并为菜单状态设置session变量。然而，我的<a>链接标记似乎不起作用。如果我添加href=""，链接就会正常工作，但是当单击链接时，它们只会刷新页面，而不会触发页面底部的查询。<?>
<div</e
浏览 4提问于2013-08-15得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
