来人请帮帮我!
我想使用一个(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 <--我希望它是可以点击的
感谢
发布于 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>
发布于 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>
发布于 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');
});
});
https://stackoverflow.com/questions/51790816
复制相似问题