Форум

BETEPAH · #11 (**permalink**) 07.11.2013, 17:38

Сообщение от Faab

Когда кнопки добавились, мне надо что бы при нажатии на одну из этих кнопок, я выделял ео родителя. Но как?

Зачем это делать, когда кнопки добавились, если изначально в цикле фигурирует родитель? Сразу и делайте с ним то, что нужно.
В JQ событие вешается тоже не на коллекцию, а на элементы этой коллекции. Так же можно и в ванили делать - цикл по коллекции и parentNode, если сильно нужно.

Faab · #12 (**permalink**) 07.11.2013, 18:12

function customFunction(eSubButton1){
    eSubButton1.parentNode.getElementsByTagName('img')[0].classList.toggle('disNone');
  };

  function createButton(sId){

      eSubButton1 = document.createElement('input');
      eSubButton1.id = sId;
      eSubButton1.type = "button";
      eSubButton1.value = "Behind";
      eSubButton1.classList.add("ret");


      eSubButton1.onclick = function(){
        customFunction(eSubButton1);
      };
    return eSubButton1;
  };

Вот так я показываю/скрываю только последнйи элемент родителя. И не вижу как сделать для каждого: что тут брать в цикл? Я вообще в правильном направлении иду?

<div class="toggle">
  <img class="screenshot" width="310" height="307" src="../images/clip_image002.gif" alt="schermafdruk"> 
</div>

Каждая кнопка в скрипте становиться следующим потомком div.toggle (в скрипте не показано)

Faab · #13 (**permalink**) 07.11.2013, 18:26

function createButton(sId){
      eSubButton1 = document.createElement('input');
      eSubButton1.id = sId;
      eSubButton1.type = "button";
      eSubButton1.value = "Behind";
      eSubButton1.classList.add("ret");
      
      
      eSubButton1.onclick = function(){
 document.getElementById(sId).parentNode.getElementsByTagName('img')[0].classList.toggle('disNone');
      };
    return eSubButton1;
  };

Это решение с id: сам назначил, сам использовал. А без id как решить эт задачу?

рони · #14 (**permalink**) 07.11.2013, 19:13

Faab,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css" media="screen">
.disNone {
  display: none;
}
</style>
<script>
window.onload = function(){
 function createButton(){
    var eSubButton1;
    eSubButton1 = document.createElement('input');
    eSubButton1.type = "button";
    eSubButton1.value = "Behind";
    return eSubButton1;
  };

  var eArticle, eImages, eImage, sClassList, eSubButton;
  var eMainButton = document.getElementById('hoofdknop');

  var eDivTootgle = document.querySelectorAll('.toggle');

  for(i=0; i<eDivTootgle.length; i++){
    eSubButton = createButton();

    eDivTootgle[i].appendChild(eSubButton);

    eSubButton.onclick = (function ()
{
  var div = eDivTootgle[i], n = 0;
    return function(){
    n ^= 1
    div.style.backgroundColor  = n ? '#FF0000' : ''
  }

})()
};
};
</script>
</head>

<body>


   <button id="hoofdknop">Alle schermen verbergen</button>
   <dd>de Wizard Site definition verschijnt, je beantwoordt een aantal vragen
      <div class="toggle"><img class="screenshot" width="238" height="222" src="../images/clip_image014.gif" alt="schermafdruk"> </div>
    </dd>
    <dt> &ldquo;Hoe wil u de website noemen?&rdquo; </dt>
    <dd>vul in <i> George&rsquo;s site</i>
      <div class="toggle"><img class="screenshot" width="310" height="307" src="../images/clip_image002.gif" alt="schermafdruk"> </div>
    </dd>
</body>

</html>

BETEPAH · #15 (**permalink**) 07.11.2013, 22:08

Сообщение от BETEPAH

Зачем это делать, когда кнопки добавились, если изначально в цикле фигурирует родитель? Сразу и делайте с ним то, что нужно.

<div id="ein" class="toggle"></div>
<div id="zwei" class="toggle"></div>
<div id="drei" class="toggle"></div>
<script>
function createButton(){
	var eSubButton1;
	eSubButton1 = document.createElement('input');
	eSubButton1.type = "button";
	eSubButton1.value = "Behind";
	return eSubButton1;
};

var eArticle, eImages, eImage, sClassList, eSubButton;
var eDivTootgle = document.querySelectorAll('.toggle'); // toggle
for(i=0; i<eDivTootgle.length; i++){
	eSubButton = createButton();
	eSubButton.onclick = function(i){
		return function() {
			alert(eDivTootgle[i].id);// показать id родителя
		}
	}(i);
	eDivTootgle[i].appendChild(eSubButton);
};
</script>

Vlasenko Fedor · #16 (**permalink**) 07.11.2013, 23:25

еще один вариант

<div id="container">
  <div class="toggle"></div>
  <div class="toggle"></div>
  <div class="toggle"></div>
</div>
<script>
window.onload = function () {
  var container = document.getElementById('container'),
    eDivTootgle = container.querySelectorAll('.toggle'),
    elLength = eDivTootgle.length,
    i = 0,
    color;
  container.onclick = function (event) {
    event = event || window.event;
    var e = event.target || event.srcElement;
    while (e != this) {
      if (e.tagName == 'INPUT') {
        color = e.parentNode.style.background;
        e.parentNode.style.background = color ? '' : 'red';
        break;
      }
      e = e.parentNode;
    }
  };
  for (; i < elLength; i++) {
    eDivTootgle[i].insertAdjacentHTML('afterbegin', '<input type="button" value="Behind"/>');
  };
};
</script>

Faab · #17 (**permalink**) 09.11.2013, 13:41

В разделе ЧаВО нашёл статью про замыкающие функции closure. Прочитав её, я понял почему срабатывал только последний объект.

И теперь форма function(i){...}(i); выглядет не так уж загадочно. Но вопросы остались.

Сообщение от BETEPAH

for(i=0; i<eDivTootgle.length; i++){
	eSubButton = createButton();
	eSubButton.onclick = function(i){
		return function() {
			alert(eDivTootgle[i].id);// показать id родителя
		}
	}(i);
	eDivTootgle[i].appendChild(eSubButton);
};

С примером Ветерана вроде всё понятно. Но вот следущее:

Сообщение от рони

eSubButton.onclick = (function (a)
{
  var div = eDivTootgle[i], n = 0;
    return function(){
    n ^= 1
    div.style.backgroundColor  = n ? '#FF0000' : ''
  }

})()

С рони я уже немного потерялся. Откуда аргумент a?

Что за форма:

eSubButton.onclick = (function (a){...})()

Я уже наверное должен знать такое, но не знаю: что значит

n ^= 1

Сообщение от Poznakomlus

container.onclick = function (event) {
    event = event || window.event;
    var e = event.target || event.srcElement;
    while (e != this) {
      if (e.tagName == 'INPUT') {
        color = e.parentNode.style.background;
        e.parentNode.style.background = color ? '' : 'red';
        break;
      }
      e = e.parentNode;
    }
  };
  for (; i < elLength; i++) {
    eDivTootgle[i].insertAdjacentHTML('afterbegin', '<input type="button" value="Behind"/>');
  };

Ваш пример оставил пока на десерт.

BETEPAH · #18 (**permalink**) 09.11.2013, 16:14

Сообщение от Faab

Я уже наверное должен знать такое, но не знаю: что значит
n ^= 1

это XOR. Часто используется как двухпозиционный тумблер.
0 xor 1 = 1
1 xor 1 = 0
Если переводить в if, то:

if(n == 1) n = 0;
else if(n == 0) n = 1;

var n = 0;
n ^= 1
alert(n);
n ^= 1
alert(n);
n ^= 1
alert(n);
n ^= 1
alert(n);

рони · #19 (**permalink**) 09.11.2013, 19:16

Сообщение от Faab

С рони я уже немного потерялся. Откуда аргумент a?

убрал

Форум

Справочник

Discord чат

Курсы javascript