关于使用相同的类切换Javascript No jQuery
关于使用相同的类切换Javascript No jQuery
提问于 2018-08-11 00:44:11
来人请帮帮我！
我想使用一个(JavaScript而不是JQuery)通过使用相同的a类来更改/隐藏一个样式，比如在JQuery上切换
.green { color:white; background:green; }
.blue { color:white; background:blue; width:1000px; height:300px; font-size:30px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<a class="my-class">Get Details1 </a><br>
<a class="my-class">Get Details2 </a><br>
<a class="my-class">Get Details3 </a><br>
<a class="my-class">Get Details4 </a><br>
<div class="green">
Text <br>
Text <br>
Text <br>
<a class="my-class">X Close X </a>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.my-class').click(function(){
$('.green').toggleClass('blue') }); });
</script>
我试着改成这样：，它不像jQuery那样工作
我的Demo (JavaScript(纯JS)): https://jsfiddle.net/packy/egfcyznm/14/或⇓
document.querySelector('.my-class').onclick = function() {
document.getElementsByClassName('green')[0]
.classList.toggle('blue');
}.green {
color: white;
background: green;
}
.blue {
color: white;
background: blue;
width: 1000px;
height: 300px;
font-size: 30px;
}<a class="my-class">Get Details 1 </a><br>
<a class="my-class">Get Details 2 -- I can't click </a><br>
<a class="my-class">Get Details 3 -- I can't click </a><br>
<a class="my-class">Get Details 4 -- I can't click </a><br>
<div class="green">
Text <br> Text <br> Text <br>
<a class="my-class">X Close X -- I can't click </a>
</div>
获取详细信息1 <--我希望它可以单击
获取详细信息2 <--我希望它可以单击
获取详细信息3 <--我希望它可以单击
获取详细信息4 <--我希望它可以单击
X关闭X <--我希望它是可以点击的
感谢
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-08-11 00:51:47
querySelector()仅返回找到的第一个匹配项。
您需要遍历querySelectorAll()返回的整个集合，并将侦听器添加到每个实例
jQuery会在内部为您完成所有这些循环
Array.from(document.querySelectorAll('.my-class')).forEach(function(el) {
el.addEventListener('click', function() {
// can use querySelector here for first one
document.querySelector('.green').classList.toggle('blue');
});
});.green {
color: white;
background: green;
}
.blue {
color: white;
background: blue;
width: 1000px;
height: 300px;
font-size: 30px;
}<a class="my-class">Get Details 1 </a><br>
<a class="my-class">Get Details 2 -- I can't click </a><br>
<a class="my-class">Get Details 3 -- I can't click </a><br>
<a class="my-class">Get Details 4 -- I can't click </a><br>
<div class="green">
Text <br> Text <br> Text <br>
<a class="my-class">X Close X -- I can't click </a>
</div>
Stack Overflow用户
发布于 2018-08-11 01:00:51
我刚刚把querySelector改成了querySelectorAll，这样我就可以得到每个带有我的类的元素，然后用一个foreach循环创建处理程序，这样它就可以做你想做的事情了。
document.querySelectorAll('.my-class').forEach(function(x){
x.onclick=function(){
document.getElementsByClassName('green')[0]
.classList.toggle('blue');
}
}); .green {
color: white;
background: green;
}
.blue {
color: white;
background: blue !important;
width: 1000px;
height: 300px;
font-size: 30px;
} <a class="my-class">Get Details 1 </a><br>
<a class="my-class">Get Details 2 -- I can't click </a><br>
<a class="my-class">Get Details 3 -- I can't click </a><br>
<a class="my-class">Get Details 4 -- I can't click </a><br>
<div class="green">
Text <br> Text <br> Text <br>
<a class="my-class">X Close X -- I can't click </a>
</div>
Stack Overflow用户
发布于 2018-08-11 01:10:23
我认为分离出querySelectors会更容易阅读，特别是在与描述性名称一起使用时。否则我认为@charlietfl是最好的。
const myClass = document.querySelectorAll('.my-class')
const listText = document.querySelector('.green')
Array.from(myClass).forEach(function(el) {
el.addEventListener('click', function() {
listText.classList.toggle('blue');
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51790816
复制相关文章
相似问题
腾讯云开发者
