Загаданное слово с одинаковыми буквами
Привет!
Есть загаданное слово, например "тонна". Каждая буква - в своём div'е (HiddenLetter) с одним и тем же классом = 'Letter Hidden'. На страничке кнопки в русским алфавитом, и на каждую кнопку/букву (AlphabetLetter) я вешаю EventListener. И если нажатая буква есть в этом слове, то div HiddenLetter меняем свой класс на 'Letter Opened', тем самым показываю угаданную букву. И вот проблема: если я нажимаю букву "н", то как мне сделать так, чтоб он пробежался по всему слову и открыл обе "н"? Не могу додуматься.
NewEvent(AlphabetLetter, 'click', function(){
var HiddenLetter = document.getElementsByClassName('Letter Hidden')
for(var k = 0;k < HiddenLetter.length;k++){
if(this.innerHTML == HiddenLetter[k].innerHTML){
HiddenLetter[k].className = 'Letter Opened'; //только один div затрагивает...
}
}
});
Заранее спасибо. |
Цитата:
<script type="text/javascript">
function visible(val) {
var hid = document.getElementsByClassName('Letter Hidden');
for (i=0; i<hid.length; i++) {
if (hid[i].innerHTML == val) {
hid[i].className = "Letter Opened";
//или
//hid[i].setAttribute("class", "Letter Opened");
}
}
}
</script>
<input type="button" value="н" onClick="visible(this.value)">
для IE придется написать самопальный метод getElementsByClassName()
// getElementsByClassName for IE
if (typeof document.getElementsByClassName == 'undefined') {
document.getElementsByClassName = function(classname) {
var all = document.all,
elements = [],
regexpr = new RegExp('\\b'+classname+'\\b','ig');
for(var x=0; x<all.length; x++) if (all[x].className)
if (all[x].className.search(regexpr)!=-1) elements[elements.length] = all[x];
return elements;
}
}
|
Спасибо, но не совсем работает. Если ввести "трололо", и попробовать отгадать сначала "т", затем "о", а потом "л", то "т" и "о" откроются сразу, а "л" - нет. Вот страничка.
|
всё нормально. просто нужно второй раз нажать на нужную букву :)
|
Цитата:
|
получилось реализовать с помощью getElementsByName()...в getElementsByClassName() какой-то косяк...незнаю...
замени просто все getElementsByClassName() на getElementsByName() и пропиши к div-ам аттрибут name одинаковый... |
yashka525,
на jQuery - подойдет ? ориентировочно строк 5 (ток выложите html код одного из слов |
Цитата:
Цитата:
|
А теперь расскажу почему так происходит
document.getElementsByClassName() возвращает вовсе не массив document.getElementsByClassName() возвращает DonNodeList (может называтся в браузерах по-другому но суть именно такая) Он выглядит как обычный массив, но не является обычным массивом. В данном случае это можно назвать "живым массивом" А именно, если вы выполните document.getElementsByClassName() И запомните его результат Если в момент выполнения было допустим три элемента с данным классом, а через некоторое время с таким классом уже 10 объектов, то все 10 автоматически окажутся в изначально запомненном объекте А если вы наоборот удалите один из них, то он исчезнет и из запомненного элемента В данном конкретном примере просиходит следующее: 1) вы берете нулевой элемент, и меняете ему класс 2) в "живом массиве" HiddenLetter теперь уже не два элемента, а только один, а значит и HiddenLetter.length == 1 3) раз i == 1 и HiddenLetter.length == 1 (а значит в HiddenLetter больше нету элементов), то цикл завершается. В цикле был перебран только один элемент |
Примеры на понимание(сейчас будут добавлены в этот пост)
<div id="id1" class="someClass">id1</div>
<div id="id2" class="someClass">id2</div>
<div id="id3" class="someClass">id3</div>
<div id="id4" class="someClass">id4</div>
<div id="id5" class="someClass">id5</div>
<script type="text/javascript">
var someClass = document.getElementsByClassName('someClass');
var anotherClass = document.getElementsByClassName('anotherClass');
document.writeln('Count of someClass: ' + someClass.length + '<br>');//5
document.writeln('Count of anotherClass: ' + anotherClass.length + '<br>');//0
document.writeln('ID of first someClass: ' + someClass[0].id + '<br>');//id1
someClass[0].className='anotherClass';//change class
document.writeln('Count of someClass: ' + someClass.length + '<br>');//4
document.writeln('Count of anotherClass: ' + anotherClass.length + '<br>');//`
document.writeln('ID of first someClass: ' + someClass[0].id + '<br>');//id2
</script>
Как видим, после строки "change class" нулевой элемент плавно "перетек" из someClass в anotherClass При этом нулевым элементом в someClass стал уже другой - id2 |
| Часовой пояс GMT +3, время: 22:41. |