如何将此js函数用于每个相同的类元素的document.querySelectorAll
要将一个 JavaScript 函数用于每个相同的类元素，可以使用 document.querySelectorAll 方法来选择所有具有相同类名的元素，并使用 forEach 方法来遍历这些元素并应用函数。
下面是一个示例代码：
// 定义一个函数，用于处理每个相同类元素
function processElement(element) {
// 在这里编写你的处理逻辑
// 可以使用 element 对象来操作当前的元素
}
// 使用 document.querySelectorAll 选择所有具有相同类名的元素
var elements = document.querySelectorAll('.your-class-name');
// 使用 forEach 方法遍历每个元素并应用函数
elements.forEach(function(element) {
processElement(element);
});在上面的代码中，你需要将 .your-class-name 替换为你要选择的类名。然后，你可以在 processElement 函数中编写你想要对每个元素执行的操作。
这种方法适用于需要对多个相同类元素执行相同操作的情况，例如添加事件监听器、修改样式等。
相关·内容
因此，我一直在使用HTML、CSS和Javascript在youtube上学习一个网站教程，但导师并没有详细说明他编写的一些代码。
这里是javascript函数PageTransitions()，我试图理解：
const sections = document.querySelectorAll('.section');
const sectBtns = document.querySelectorAll(".controlls");
const sectBtn = document.querySelectorAll(".control");
c
浏览 1提问于2022-10-09得票数 -1
如果我有多个项目，我想从一个显示'none'，到一个显示‘块’，什么是最有效的方式做它？
我将用于单个项目的JS如下所示，但我想一个页面或站点上有几个JS。我应该以某种方式使用函数构造函数吗？
var sideNav = document.getElementById('sideNav');
var menuButton = document.getElementById('menuButton');
function toggle() {
if(sideNav.style.display) {
sideNav.styl
浏览 0提问于2018-07-31得票数 0
回答已采纳
1回答
我需要创建一个函数来检查匹配，并在找到匹配后删除div。当我单击两个瓷砖时，我将禁用单击，直到它处理是否匹配为止，如果找到匹配，则会删除这些瓷砖，但如果不是翻转卡片，则会将其倒转。
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <
浏览 4提问于2022-10-20得票数 1
$('. element').css ({
'transform' : 'translate(blah blah);'
});
与我知道如何用JavaScript更改css的唯一方式相比，我喜欢这种组织方式。
Element.style.color='red';
我对JavaScript非常陌生，所以除了非常基本的东西之外，我从来没有做过太多的改变css的工作。我只想知道您如何用普通的JavaScript编写上面的jQuery
谢谢
浏览 0提问于2018-09-25得票数 1
我想编写一个JS泛型函数，它可以以不同的方式处理由ID选择的单个元素或由类选择的多个元素。
var el1 = document.getElementById('myId');
myFunction(el1)
var el2 = document.getElementsByClassName('myClass');
myFunction(el2)
我的问题是写函数。我开始做这样的事情：
function myFunction(el) {
if (typeof el == undefined) process(el);
else {
浏览 1提问于2020-01-19得票数 0
2回答
如何在单击按钮时删除多行
、、、、
我想在单击“删除”按钮时删除选定的行。我的删除功能运行良好，我面临的问题是，只有最顶部的删除按钮是工作，我的UI屏幕看起来像下面
我使用复选框选择表行。如果我选择了所有三个记录，那么三个delete按钮都应该起作用，并且任何delete按钮都可以删除选定的行，但在我的例子中，只有第一个delete按钮起作用。这是我的html和js代码。
<td class="td-org">${entry.sORGID}</td>
<td class="td-org">${entry.url}</td>
<td cla
浏览 2提问于2018-10-31得票数 3
基本上，我喜欢向具有相同类名的多个元素中添加一个新类。目前，它只向最后一个类添加了一个类。我试过使用document.querySelectorAll，但没有得到任何结果。我错过了什么？
HTML示例
<div class="model"></div>
<div class="model"></div>
<div class="model"></div>
JS
_updateParagraph: function(settings, className) {
var
浏览 6提问于2015-09-15得票数 12
3回答
我试图从数组myArr中传递字符串元素，同时选择它应该与forEach循环一起使用的div，这样下面的四个div元素中的每一个都有一个来自数组的对应字符串元素。
我遇到了一些问题，因为我用querySelectorAll方法选择了div。我会感谢你的帮助。下面的代码只是我正在做的工作的一个示例，所以不能更改太多。
HTML
<div class="number">old number</div>
<div class="number">old number</div>
<div class="numb
浏览 0提问于2018-12-18得票数 0
回答已采纳
2回答
我有一个按钮列表，当单击它时显示弹出窗口就像工具提示，当您再次单击时关闭它。
我正在寻找:当你点击其中一个按钮，任何弹出打开之前，自动关闭，不需要再点击它。
function myFunction2() {
var popup = document.getElementById("myPopup2");
popup.classList.toggle("show");
}
function myFunction3() {
var popup = document.getElementById("myPopup3");
浏览 1提问于2019-05-18得票数 0
回答已采纳
我是pure JS的新手。我有一个类似这样的代码，当点击一个元素时，在重新加载页面后保持滚动位置： let cords = ['scrollX','scrollY'];
document.querySelectorAll('.scroll').forEach(el => {
el.addEventListener('click', () => {
cords.forEach(cord => localStorage[cord] = window[cord]);
});
});
w
浏览 12提问于2021-02-09得票数 0
回答已采纳
5回答
我在我的项目中有一个情况，在css中我有一个类
它现在是空的
#version_mobile.hidden
{
}
在js中，我正在这样做
this.$("#version_mobile.hidden").css({right: - window.text_mobile_width});
(我猜想我的选择器是坏的?)
如何使用这个动态创建的值为这个类添加“正确”属性？
要成为类
#version_mobile.hidden
{
right : -450px;
}
顺便说一下，我需要使用这个类，因为动画正在使用它:/
浏览 0提问于2013-09-12得票数 0
1回答
试图通过json文件检索唯一数据
、、、、
我正在寻找帮助，我正试图从一个用于学生项目的api中获取一些json文件的数据(我非常熟悉API的内容)。
我正处于项目开始阶段，他们要求我在主页上获取所有json文件数据，并提供与以下内容相关的所有信息：
它工作得很好，当用户单击其中一个项目时，它会显示相同的信息，但只显示单击的信息，这就是我被困的地方。
当我单击一个项目时，他们中的每个人都有一个与显示他们自己的id的链接相关的id：
因此，我为产品页面创建了另一个js文件，我只能用Javascript Vanilla实现它们，这就是我尝试过的：
// API REQUEST
const connection = fetch (&#
浏览 6提问于2022-02-14得票数 0
回答已采纳
2回答
我想使用内联CSS制作一个完整的div cursor-pointer，但它目前只影响子元素周围的空格。我试过position和z-index都没有用。
我没有也不能有一个外部样式表。
<div className="cursor-pointer">
<checkbox>
<label>
</div>
在不将cursor-pointer应用于每个元素的情况下，有什么方法可以做到这一点吗？也有条件逻辑，所以会变得很混乱。
浏览 2提问于2022-07-27得票数 2
我的JS技能正在让我失望，也许也是我的谷歌技能。这就是我想做的：
当<li>在.first分区中徘徊时，使用相同的ID向.second分区的<li>中添加一个" .active“类。因此，如果您在.first li#one上悬停，将添加一个.active类，即.second li#one。
注意:这些in是动态的，因此无法预先知道。
下面是html的样子：
<div class"first">
<ul>
<li id="one">Lorem</li>
&
浏览 2提问于2022-08-04得票数 0
回答已采纳
我在使用querySelectorAll获取元素文本时遇到了一些问题。我已经尝试过使用querySelector，但它只给出了第一个元素的值。我想要实现的是获取单击元素的文本。这是我的密码：
function __(selector){
var self = {};
self.selector = selector;
if(typeof selector == 'undefined'){
self.element = [self.selector];
}else{
self.element = document.querySe
浏览 3提问于2016-12-12得票数 0
回答已采纳
我想创建一个html容器(div)的列表，并将其中的列表项(Div)作为单独的面板列出，但我希望列表是统一的，因此面板中的列应该对齐，如下图所示： ? 可见，Col_1的宽度为"BBBBB"，因为这是该列中最宽的内容，Col_2的宽度为"0x12345678"，依此类推。 我还没有发现任何css能够在其父级之外作为网格或表工作，而且由于所有列表项容器都是“网格”的父级，所以它们无法同步。 我一直在尝试创建一个javascript来搜索每个列元素，选择最宽的并设置列中所有其他元素的宽度，将此方法分配给每个元素的DOMSubtreeModified事件，并
浏览 24提问于2021-01-05得票数 0
JavaScript：
const show = entries => entries[0].isIntersecting ? entries[0].classList.remove('is-hidden') : null;
const observer = new IntersectionObserver(show, {threshold:0});
Array.from(document.querySelectorAll('.js-hidden')).forEach(element => observer.observe(element));
当‘
浏览 2提问于2019-02-23得票数 1
回答已采纳
1回答
我有一个有几个按钮的页面，每个按钮都有一个要显示的信息，我需要显示一个按钮信息，并通过单击按钮隐藏其他按钮。
我尝试了这段代码，我希望sec2会出现，所有类名为“节”的部分都会被隐藏，sec2切换时点击，但其他部分不会隐藏。
<button class="button1" onclick="myFunction1();hide()"></button>
<style>
.button1 {
background-image: url("http://s910698169.onlinehome.us/wp-conte
浏览 9提问于2022-11-17得票数 0
我知道可以通过Id将codemirror应用于多个文本区域，但不幸的是，我需要使用class，因为我正在使用的文本区域已经有来自其他脚本的Id。
到目前为止，我的代码如下。
HTML
<textarea class="textarea-class"></textarea>
<textarea class="textarea-class"></textarea>
JS
$('.textarea-class').each(function(index, elem){
CodeMirror.f
浏览 3提问于2016-12-20得票数 3
2回答
如何使Firefox扩展单击只由类而不是id定义的div。例如：
<div class="testBtn">Click me</div>
该站点支持jQuery，因此在火狐控制台中可以编写：$(".testBtn").click()
但是，如果我将相同的代码段放入js文件中，它就无法工作。我怎么才能让这个起作用？
应该被点击的网站不是我的网站，所以我不能修改它。
浏览 4提问于2014-02-07得票数 0
回答已采纳
2回答
当页面加载时，需要所有带卡片类的div具有slideUp。
这就是我想要做的，但不起作用。
$(document).ready(function () {
const div = Array.from(document.querySelectorAll('.flex-wrap .d-flex'));
$(div).slideUp(500);
console.log(div);
})
带有块div的Html本身
<div class="d-flex flex-wrap"&
浏览 0提问于2019-04-29得票数 0
回答已采纳
我试图改变我的div中所有段落的字体大小和行高，这取决于屏幕的大小--以便于移动响应。正如您在示例中所看到的，当我尝试用JS更改段落大小时，它只会更改第一个元素。当我在CSS中这样做时，它是有效的，而不是JS。
const textContP = document.querySelector('.textcont p');
textContP.setAttribute("style", "line-height: 5vw");
textContP.style.fontSize = "3vw";
.textcont p {
浏览 15提问于2022-08-28得票数 -1
回答已采纳
我试图向DOM中添加一个元素，但只想在元素不存在的情况下才添加它。由于我也将在ajax调用中使用该函数，因此它将重复其自身，因此我需要检查元素是否已经存在。
对于jQuery，这很简单：
if( jQuery(".class").length == 0){
jQuery("<div class='new_div'></div>").appendTo(".toolbar-sorter");
}
我怎么用香草JS做同样的检查？当前代码：
const element = document.querySelecto
浏览 5提问于2022-10-21得票数 -3
回答已采纳
我正在尝试创建一个转换，它会在加载的页面中迅速消失，然后当单击一个链接时，页面就会逐渐褪色并稍微向上移动。
为此，我创建了类“是加载的”，并将其应用于元素(“包装器”和“页面淡出”)。加载文档时，将添加“is - loaded”类，然后单击链接时，将从两个元素中删除相同的类。
守则：
.wrapper {
transform: translateY(-25px);
transition: transform cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
}
.wrapper.is-loaded {
transform: translateY(0);
浏览 3提问于2019-12-11得票数 0
回答已采纳
1回答
使用jQueryUI教程中提供的示例：
当我将可拖动的<li>元素拖放到可排序列表中时，它将被克隆。一切都如期而至。然后，克隆元素也可以重新排序。这也如预期的那样起作用。问题是新创建的克隆元素的“单击”事件不会触发。为了说明这一点，只需将下面的四行代码插入到函数的末尾，就可以修改sortable.html。
$("li").on("click", function(event){
var clicked_element_class = $(this).attr('class');
alert(clicked_element
浏览 6提问于2013-01-16得票数 3
回答已采纳
我试图从一个网页中获取3个<a> some text </a>链接的文本，并使用Swift方法使用javascript来获取类/id/html元素来抓取它。但是，我没有从html中获得正确的类或id。
我尝试使用document.getElementsByClassName/Id并将所有的类/id调用到我需要的类/id，但是我得到了一个错误：
‘document.getElementByClass(’col 12 col-md-9‘)，'document.getElementByClass’是未定义的
我也不知道为什么。有人能为我指出解决这个问题的正确方
浏览 0提问于2018-10-11得票数 0
回答已采纳
我从来没有像.class1 + .class2{} .I这样的类声明需要使用Js操作padding-top属性。
CSS
.sticky + .content {
padding-top: 150px;
}
这是我试过的Js。我想做那个padding top -150px。我需要能够动态地改变它。它不起作用。我的错误在哪里？
JS
var myElements = document.querySelectorAll(".content"+".sticky");
for (var i = 0; i < myElements.length; i++
浏览 1提问于2019-07-11得票数 1
回答已采纳
请帮我解决这个问题。我想在标签html中添加javascript，但是它只能工作1次，为什么不能添加2次或更多次呢？
这是我的代码：JS
// Array of words
var words = ["Andre", "Anne", "Billy", "Clark","David", "Edward", "Gee", "Jasper", "Kelvin", "Steven", "Tom", "Willy"
浏览 5提问于2022-06-28得票数 -4
回答已采纳
我有一个产品图像的网格，我希望所有具有相同ID的图像在使用javascript 5秒后都能显示出来。目前，它只适用于第一个图像，而其他图像仍然隐藏，并且都具有相同的id。我希望它能适用于所有具有相同ID的图像。
/html示例/
<div class"product1 image">
<img src="image1.jpg" id="myid">
</div>
<div class"product2 image">
<img src="image2.jpg"
浏览 1提问于2022-02-02得票数 2
我在app.js中呈现自定义组件
return (
{cards.map((index) => {
return <Card key={index} />
)
在Card中，我将特定的className
return (
<ListItem id="root" className="find-card"> ...
因为<ListItem/>本身是material-ui的一部分，所以它将className转换为
<li class="MuiListItem-root find-
浏览 6提问于2020-05-19得票数 0
回答已采纳
1回答
在我的index.js文件中，我尝试使用我的pv()函数将两个图像合并在一起。每当我点击cmd + s -> cmd + r来重新加载页面时，页面都是完全空白的。换句话说，我的代码是乱七八糟的。如何使我的合并图像出现？
这是我的index.html文件：
<!DOCTYPE html>
<html>
<head>
<title>My practice web app</title>
<meta charset="utf-8">
<meta name="
浏览 3提问于2017-01-28得票数 0
下面的JS代码打开/关闭了现场搜索，但是页面上有两个位置有一个.search-button按钮，第一个可以工作，但是第二个不能工作。如果我加上更多，它们也不起作用。我可以让这段代码在包含.search-button的页面上的所有类上运行吗？
var wHeight = window.innerHeight;
var sb = document.querySelector(".search-button");
var closeSB = document.querySelector(".search-close");
var SearchOverlay = doc
浏览 5提问于2022-09-10得票数 0
回答已采纳
4回答
我的页面上有多个复选框元素，每当有人单击每个复选框元素时，它们的颜色和文本都会发生变化，我可以用CSS实现这一点，但我也想更改复选框按钮中的图标，所以我在HTML代码中使用javascript，但是当我运行脚本时，它只对一个元素工作，只有第一个元素，这意味着图标只对第一个复选框按钮进行更改，但它并不适用于所有其他按钮，我试图给出所有复选框按钮唯一的ID，但我仍然有相同的问题。
这是未选中的复选框1和2。
这是选中的复选框1和2。
我运行的脚本是这样做的：
Ps:对于所有其他复选框按钮，我都使用这个脚本，我已经尝试更改按钮的id以匹配HTML和脚本id，但仍然只适用于第一个。
浏览 5提问于2022-03-16得票数 1
我的makeRows函数没有像我期望的那样工作，我不确定我是不是用正确的方法。当我按下"clear all“时，提示符会运行以创建新的行和列，但mouseOver类不会被添加回整个网格，只会添加到底部。
const container = document.getElementById("container");
function makeRows(rows, cols) {
container.style.setProperty("--grid-rows", rows);
container.style.setProperty("
浏览 10提问于2020-05-28得票数 1
回答已采纳
我有多个带有data-rel属性的按钮，如何在每个按钮上单击该属性？
HTML
<button class="category" data-rel="all">All</button>
<button class="category" data-rel="banana">Banana</button>
<button class="category" data-rel="orange">Orange</button>
<b
浏览 2提问于2018-01-12得票数 3
回答已采纳
我有三个按钮在三页(注册，登录，和一个按钮的签署)。我在消防基地工作。我成功地做到了这一点，但是在3个js文件中，我需要在一个js文件中这样做，但是在一个文件中只需要第一个按钮工作(代码中的第一个按钮)。我使用js模块，我可以用onclick来完成这个任务吗？有人可以告诉我如何在多个页面中实现多个按钮的addEventlistener？
我试过了，但这不管用
//signup page, signup button id = signUp
signUp.addEventListener("click", (e) => {
var fullname = docume
浏览 2提问于2022-11-11得票数 0
回答已采纳
我试图让js根据html中的每个divs文本内容更改每个div的标题属性。
我想从自己的文本中添加每个div的标题，例如：“文本示例1”的标题将是“文本示例1"，”文本示例2“的标题将是”文本示例2“，等等。
目前，我已经做了一个js代码，它可以做到这一点，但只针对一个div。我是js的完全初学者，所以任何建议都很感激。
<div class="example">
<div class="text1" id="id-text1">Text Example 1</div>
</div>
&l
浏览 5提问于2022-10-26得票数 2
回答已采纳
我在我的Flask应用程序中使用bootstrap.min.css作为样式表，并以以下方式对Pandas输出的数据表进行样式化：
result = pd.DataFrame.from_dict(result, orient='index', columns = [var2use]).to_html(classes='table table-striped table-hover', header = "true", justify = "center")
一切都进行得很好，风格也如人们所希望的那样被应用。我不明白的一件事是，如何也
浏览 10提问于2020-05-11得票数 1
回答已采纳
我有一个JS脚本，当您单击某个HTML元素时，它会打开一个模式对话框窗口。
我的问题是这个脚本只对一个元素有效。当我在另一个元素上调用相同的类名.trigger时，整个脚本都无法工作。
HTML
<div class="trigger">
<h2>Contact Me Form</h2>
<div class="modal">
<div class="modal-content">
<span class="
浏览 0提问于2019-10-30得票数 0
在CSS文件中，我可以指定具有特定类名的元素，这些元素位于具有特定ID的div中，如：
<div id="container1">
<div class="innerBox">Box A</div>
<div class="innerBox">Box B</div>
</div>
<div id="container2">
<div class="innerBox">Box C</
浏览 12提问于2022-03-14得票数 1
我注意到jQuery .attr()有一个变体，它允许您为函数设置属性名称:请参阅。
我正在尝试寻找与此对应的普通js，但请注意，setAttribute()函数似乎只允许您将属性值设置为字符串:请参阅。
更具体地说，我正在尝试将jQuery中的代码片段转换为普通的js：
$(function(){
$('.stroke-double, .stroke-single').attr('title', function(){
return $(this).html();
});
});
浏览 50提问于2019-03-05得票数 1
回答已采纳
2回答
我有jq代码，我需要转换成->js<-.对我来说没有意义(因为jq是js)，代码更长，时间更长(我不是程序员)，并且给出了完全相同的效果.更不用说浏览器兼容性了。但是..。
我希望选择列表(li)中的所有链接(a)元素，对它们进行迭代，更改值等等。
在jq中，有一个简单的行$(' li ').find('a')；即使li和一个类似的行之间还有更多的东西，它也能工作：
<li>
<div>
<a href=''>inside div</a>
</div>
</li>
浏览 4提问于2017-03-05得票数 1
回答已采纳
例如，假设我有三个<div>元素，其中有一个.js-hello选择器：
<div class="js-hello">...</div>
<div class="js-hello">...</div>
<div class="js-hello">...</div>
我想让这个看起来像：
<div class="js-hello">Hello Foo!</div>
<div class="js-hello"
浏览 1提问于2015-03-17得票数 0
回答已采纳
2回答
多个css类做什么？
、、、、
我的应用程序使用使用CSS模块的多个类。
open是一个boolen变量，用于确定纸张是否应该移动。
<Paper className={`${classes.paper} ${open && classes.paperShift}`}>
问题：为什么要使用多个类，以及它们如何呈现不同的结果？
注意，我看了另一篇文章：
浏览 0提问于2022-06-08得票数 -1
回答已采纳
我正试着把一些javascript代码放到我的Django网站上。javascript代码应该检查按钮是否被按下，如果按下，则向用户发出警报。然而，这只适用于第一个按钮。因为我遍历了所有的按钮来显示它们，所以我认为javascript不会把它看作HTML代码。这是javascript代码。 const card = document.querySelector('.card');
card.addEventListener('click', e => {
if (e.target.classList.contains('btn'))
浏览 23提问于2020-06-17得票数 1
我的问题是我只能在我的第一个“侧菜单”div上切换“活动”类，而不是其他的。请看一下我的密码，让我知道出了什么问题。
当活动时，左边会有一个跨度，显示它是当前的选择，请参考附加的图像。
HTML脚本
<div class="sidebar">
<div class="side-menu">
<a class="side-option" href="#beverages"><img src="images
浏览 2提问于2022-08-19得票数 0
我使用的选择箱JS插件风格选择盒。当页面上有多个选择框实例时，插件似乎没有初始化。
Selectr插件：
演示：
这就是我按照文档初始化插件的方式：
new Selectr('.selecting');
我遗漏了什么？这是个虫子吗？
浏览 12提问于2017-10-08得票数 1
回答已采纳
我有一个JavaScript嵌入到sdk.js中--这个SDK使用的是已编译的sdk.js文件(不可能对其进行反编译)，该子程序正在对特定的域执行卷曲。
我正在寻找一个解决方案，包括一个全局的JavaScript侦听器在我的HTML，以阻止卷曲到该特定的领域。
这有可能吗？有谁有聪明的主意来解决这个问题吗？
浏览 2提问于2021-09-14得票数 0
3回答
下面的JS就像它应该的那样工作，我的JS知识是0%。唯一的问题是，我需要下面的代码来针对多个div，但是相同的id或不同的id并不重要。它也需要无限。所以每50秒就需要重复一次。下面的js的目标是重置我正在运行的CSS3动画。可以在这里找到项目文件:www.dresynk.com/img/slider。
// retrieve the element
element = document.getElementById("ani");
setTimeout(function() {
// -> removing the class
element.classList.re
浏览 2提问于2014-03-26得票数 0
回答已采纳
1回答
我正在处理一些数据按钮，但不知道如何使函数工作。我试图通过一个数据属性和相应的ID向元素中添加一个类，然后用主题内的按钮停止事件传播。
到目前为止，这就是我所拥有的：
HTML:
<div class ="subject" id="subject1">
<button class="remove">Remove</button>
The Subject
</div>
<div class ="subject" id="subject2">
浏览 2提问于2014-03-31得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
