Как изменить CSS родительского Div в JavaScript не JQuery

Question

Как изменить CSS родительского Div в JavaScript не JQuery

1

Я хочу изменить CSS родительского div, если я нажму на дочерний элемент его родительского div, а не, например, если я нажму href tag. Я хочу изменить CSS своего класса = "changed_area".

Как я могу это сделать?

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; ?>

Mohammed 05 авг. 2018, в 22:03

Источник

0

как насчет w3schools.com/jsref/prop_node_parentelement.asp ?
Itamar 05 авг. 2018, в 19:38
0

Я думаю, что вы имеете в виду «предок» вместо «родитель» и «потомок» вместо «ребенок». Поправьте меня если я ошибаюсь. См .: Предок, Потомок, Брат, Родитель, Ребенок - Объяснили
3limin4t0r 05 авг. 2018, в 20:02

Теги:

javascript

3 ответа

Ещё вопросы

как насчет w3schools.com/jsref/prop_node_parentelement.asp ?
Я думаю, что вы имеете в виду «предок» вместо «родитель» и «потомок» вместо «ребенок». Поправьте меня если я ошибаюсь. См .: Предок, Потомок, Брат, Родитель, Ребенок - Объяснили

Shining · Answer 1 · 2018-08-05T18-04-00.000Z

Я думаю, вы можете сделать что-то вроде этого: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

EDIT: лучший способ сделать это

 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%';
        }
    });
}

Кроме того, если вы хотите быть уверенным, что будет выбран правильный div, вы можете использовать свойство parentElement для up_btn [i] (потому что в настоящее время, если у вас нет одинакового числа div и кнопок, вы получить ошибку). Например, если вы поместите другую кнопку без parentDiv, значение параметра change_area [i] будет неопределенным. Я отредактировал свой пост с этим решением.

Farzin Kanzi · Answer 2 · 2018-08-05T18-59-00.000Z

Ваш код влияет на все ваши div с классом "changed_area", что я не думаю, что это то, что вы намереваетесь.

Чтобы получить доступ к родительскому элементу с помощью javascript, вы можете использовать parentElement. Чтобы получить родительский элемент родительского родителя..., который удовлетворяет некоторому условию (например, с классом), вы можете сделать это:

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%';
   }
  }
 }

Xesenix · Answer 3 · 2018-08-05T18-27-00.000Z

Просто добавьте прослушиватель событий на родителя и используйте 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');
}

Вот скрипка для этого