如何在javascript而不是jquery中更改父div的css
如何在javascript而不是jquery中更改父div的css
提问于 2018-08-06 03:21:24
如果我单击父div的子级，我想要更改父div的CSS，而不是，例如，如果我单击href tag。我想要更改它的class="changed_area“的CSS。
我该怎么做呢？
var up_btn = document.getElementsByClassName('up_btn');
var up_btn_length = up_btn.length;
var changed_area = document.getElementsByClassName('changed_area');
var changed_area_length = changed_area.length;
for (var i = 0; i < up_btn_length; i++) {
up_btn[i].addEventListener('click', function() {
//alert('welcome');
for (var i = 0; i < changed_area_length; i++) {
if (changed_area[i].style.top == '-100%') {
changed_area[i].style.top = '0%';
}
else {
changed_area[i].style.top = '-100%';
}
}
});
}<?php foreach($questions As $question): ?>
<div class="changed_area" style="width: 100px;">
<div class="inside_ajax_part1">
<div id="inside_left">
<img src="<?php echo $Filter_customer->image; ?>" />
</div>
<div id="inside_right">
<a class="up_btn" href="#">Up</a>
</div>
</div>
<div class="inside_ajax_part2">
<p>mohammed</p>
</div>
</div>
<?php endforeach; ?>
回答 3
Stack Overflow用户
发布于 2018-08-06 03:32:00
我认为你可以这样做：https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
编辑:更好的方法
for (var i = 0; i < up_btn_length; i++) {
up_btn[i].addEventListener('click', function(){
var changed_area = up_btn[i].parentElement;
if ( changed_area.classList.contains('changed_area') ) {
changed_area.classList.remove('changed_area')
}
else {
changed_area.classList.add('changed_area')
}
if(changed_area.style.top == '-100%') {
changed_area.style.top = '0%';
}
else {
changed_area.style.top = '-100%';
}
});
}Stack Overflow用户
发布于 2018-08-06 03:58:09
只需在父级上添加事件侦听器并使用currentTarget
const parent = document.getElementsByClassName('changed_area');// select parent
for (var i = 0; i < parent.length; i++) {
parent[i].addEventListener('click', (ev) => ev.currentTarget.className = 'clicked');
}Stack Overflow用户
发布于 2018-08-06 05:48:57
你的代码使用"changed_area“类影响所有的div，我不认为这是你想要的。
要使用javascript访问父元素，可以使用parentElement。获取parent的parent的parent....满足一些条件(比如有一个类)，你可以这样做：
function Get_changed_area(targetElement){
var parent = targetElement.parentElement;
if(parent.hasClass('changed_area'))
return parent;
else Get_changed_area(parent) //repeat the function for parent
}
for (var i = 0; i < up_btn_length; i++) {
up_btn[i].addEventListener('click', function() {
changed_area = Get_changed_area(up_btn[i]);
if (changed_area.style.top == '-100%') {
changed_area.style.top = '0%';
}
else {
changed_area.style.top = '-100%';
}
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51697534
复制相关文章
相似问题
腾讯云开发者
