Проблема с флагами js

243
18 мая 2018, 07:40

Есть разметка, в которой по очереди меняются предметы. Сперва записывается в item1, затем в item0, потом опять в item1 и так далее.

Проблема в том что не могу сделать вывод предмета который только что добавился. Пока что сделаю проверку в какой div записывается, но не работает 

(function() { 
  let flag = true; 
  let item = [document.getElementById("item0"), document.getElementById("item1")]; 
  document.addEventListener("click", function(e) { 
    if (e.target.classList.contains('link')) { 
      if (flag ? item[0] : item[1]) { 
        c("0"); 
      } else { 
        c("1"); 
      } 
      flag = !flag; 
    } 
  }); 
})();
<h1 id="item0">Div 1</h1> 
<h1 id="item1">Div 2</h1>

Answer 1

Использование classList предпологает наличие атрибута class, в вашем случае он отсутсвовал.

(function() { 
  let flag = true; 
  let item = [document.getElementById("item0"), document.getElementById("item1")]; 
 
  //---------------------------------------------------------------- 
  function c(str) { 
    console.log('Entered c...'); 
  } 
  //---------------------------------------------------------------- 
 
  document.addEventListener("click", function(e) { 
 
    if (e.target.classList.contains('link')) { 
 
      if (flag ? item[0] : item[1]) { 
        c("0"); 
      } else { 
        c("1"); 
      } 
      flag = !flag; 
      console.log(flag); // debugg 
    } 
  }); 
})();
<!-------- Doesn't have class link --------> 
<h1 id="item0" class="item00">Div 1</h1> 
<h1 id="item1">Div 2</h1> 
<!-------- Has class link --------> 
<div class="link">With link class</div>

Есть такой вариант.

(function() { 
  let flag = true; 
  let item = [document.getElementById("item0"), document.getElementById("item1")]; 
 
  //---------------------------------------------------------------- 
  function c(index) { 
     // Hide/Show current element 
    item[index].classList.add('show'); 
    item[index].classList.remove('hide'); 
    // Hide other element 
    item[index ? 0 : 1].classList.add('hide'); 
 
  } 
  //---------------------------------------------------------------- 
 
  document.addEventListener("click", function(e) { 
    if (e.target.classList.contains('link')) { 
      if (flag) { 
        c(0); 
      } else { 
        c(1); 
      } 
      flag = !flag; 
    } 
  }); 
})();
.hide { 
  visibility: hidden; 
} 
 
.show { 
  display: block; 
} 
 
.link { 
  cursor: pointer; 
  color: orange; 
}
<!-------- Doesn't have class link --------> 
<h1 id="item0" class="hide">Div 1</h1> 
<h1 id="item1">Div 2</h1> 
<!-------- Has class link --------> 
<div class="link">With link class</div>

Answer 2

(function (){ 
  let flag = true; 
  let items = [document.getElementById("item0"), document.getElementById("item1")]; 
  document.addEventListener("click", function(e) { 
    if (e.target.classList.contains('link')) { 
      e.preventDefault();  
      addText(items[+(flag = !flag)], e.target.textContent);  // +Bool === 0 или 1 (Number)  
    } 
  }); 
 
  function addText(elem, str) { 
    elem.insertAdjacentHTML('beforeend', ` 
      <span class="item-sub">${str}</span>  
    `);  
    console.clear();  
    console.log(`Текст "${str}" добавлен в #${elem.id}`);  
  } 
})();
h1 { padding: 0.2em 0.2em 0.2em 0.7em; line-height: 1em; min-height: 1em; background-color: #eee; box-shadow: inset 0 3px 5px 0 #0004; } 
h1:nth-of-type(n+2) { margin-top: -0.5em; } 
.item-sub { margin-left: -0.5em; } 
.link { font-size: 32px; text-decoration: none; margin-right: 0.5em; padding: 0 0.5em; border: 1px solid #ccc; } 
.link:before { content: '+'; display: inline; }
<a href="#" class="link">
READ ALSO
Как передать контекст вызова в функцию прототипа?
javascript

Как передать контекст вызова в функцию прототипа?

Не понимаю как передать this в новый объектЕсли это делать из конструктора то все отлично работает а если делать через прототип то нет

 239
Валидация на совпадение паролей в форме регистрации,блок отправки при ошибке работает,при совпадении не отправляет
javascript

Валидация на совпадение паролей в форме регистрации,блок отправки при ошибке работает,при совпадении не отправляет

Как сделать так что бы при else форма отправлялась пользователю,грубо говоря как выше отменить действие eventpreventDefault(); (return false; не работает) ?

 230
Управление SVG по его id
javascript

Управление SVG по его id

 264
Всегда выводит ветвь true
javascript

Всегда выводит ветвь true

Разметка html

 239