спрятать/объект + css
В JQuery я умею делать кое-какие действия. А как это делать в JS?
1) Как с JS спрятать/показать элемент документа? 2) Как добавить элементу новое CSS-свойство? Спасибо |
|
Цитата:
У меня есть такие элементы.
<style type="text/css" media="screen">
.disNone {
display: none;
}
</style>
<script>
window.onload = function(){
var eMainButton = document.getElementById('hoofdknop');
eMainButton.onclick = function(){
var eDivImages = document.querySelectorAll('.toogle');
//var sClassList =
eDivImages.classList.add('disNone');
//alert(sClassList);
};
};
</script>
<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> “Hoe wil u de website noemen?” </dt>
<dd>vul in <i> George’s site</i>
<div class="toggle"><img class="screenshot" width="310" height="307" src="../images/clip_image002.gif" alt="schermafdruk"> </div>
</dd>
Выходит ошибка: TypeError: eDivImages.classList is undefined eDivImages при контрольном выводе выдаёт Object NodeList |
Faab,
каждому елементу eDivImages надо присвоить класс а не всем хором |
Перебрать в цикле?
|
Цитата:
|
var eSubButton = document.createElement('input');
eSubButton.type = "button";
eSubButton.value = "Behind";
var eDivTootgle = document.querySelectorAll('.toggle'); // toggle
// alert(eDivTootgle.length);
var i = 0;
for(i=0; i<eDivTootgle.length; i++){
eDivTootgle[i].appendChild(eSubButton);
};
Так элемент кнопка добавляется только к последнему диву, а мне надо к каждому. Нужно кажый раз создавать новую кнопку или клонировать объект? Как лучше? var i = 0; перед циклом нужна или нет? |
Цитата:
|
Цитата:
Нативные эквиваленты функций jQuery |
Что то я понимаю. Приведу сначало весь скрипт, а потом вопросы.
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'); // toggle
// alert(eDivTootgle.length);
for(i=0; i<eDivTootgle.length; i++){
eSubButton = createButton();
eDivTootgle[i].appendChild(eSubButton);
}; //parentNode
eSubButton.onclick = function(){
// alert(eSubButton.value);
};
Когда кнопки добавились, мне надо что бы при нажатии на одну из этих кнопок, я выделял ео родителя. Но как? Выделить все кнопки (например через getElementsByTagName) и и на всю коллекцию поставить событие? В JQ такой принцип работы вроде. Цитата:
|
Цитата:
В JQ событие вешается тоже не на коллекцию, а на элементы этой коллекции. Так же можно и в ванили делать - цикл по коллекции и parentNode, если сильно нужно. |
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 (в скрипте не показано) |
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 как решить эт задачу? |
Faab,
:write:
<!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> “Hoe wil u de website noemen?” </dt>
<dd>vul in <i> George’s site</i>
<div class="toggle"><img class="screenshot" width="310" height="307" src="../images/clip_image002.gif" alt="schermafdruk"> </div>
</dd>
</body>
</html>
|
Цитата:
<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>
|
еще один вариант
<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>
|
В разделе ЧаВО нашёл статью про замыкающие функции closure. Прочитав её, я понял почему срабатывал только последний объект.
И теперь форма function(i){...}(i); выглядет не так уж загадочно. Но вопросы остались. Цитата:
Цитата:
Что за форма:
eSubButton.onclick = (function (a){...})()
Я уже наверное должен знать такое, но не знаю: что значит n ^= 1 Цитата:
|
Цитата:
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); |
Цитата:
|
| Часовой пояс GMT +3, время: 22:00. |