Люблю то, что делаю!
С нами с 22.10.06
Сообщения: 5053
Рейтинг: 4418
 
|
 Добавлено: 17/03/14 в 19:30 |
По функциолналу нужно
1. Открываем страницу, всё свернуто (это на данном этапе сделано)
2. При клике по одному из диву #descKeypad должен развернуться див с кнопаками идущий за тем по которому кликнули
содержание HTML:
| Код: [развернуть] |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script type="text/javascript" src="../_js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="./js/myScript.js"></script>
<title>test</title>
</head>
<body>
<div id="descKeypad">Латинские буквы</div>
<div id="buttonKeypad">
<input type="button" value="A">
<input type="button" value="B">
<input type="button" value="C">
<input type="button" value="D">
<input type="button" value="E">
<input type="button" value="F">
<input type="button" value="G">
<input type="button" value="H">
</div>
<div id="descKeypad">Цифры</div>
<div id="buttonKeypad">
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="4">
<input type="button" value="5">
<input type="button" value="6">
<input type="button" value="7">
<input type="button" value="8">
</div>
</body>
</html>
|
содержание myScript.js
| Код: [развернуть] |
$(document)
.ready(
function() {
$("#descKeypad").click(keypadOnOff);
$("#buttonKeypad*").hide();
}
);
function keypadOnOff(){
$("#buttonKeypad*").toggle(500);
}
|
но я немогу разобраться, реакция идет только кликнув по первому диву т.е. там где записано "Латинские буквы"
можно конечно написать функции к каждому диву, но если их будет 20, то получается бред, вероятно есть выход достаточно простой?
Подскажите кто знает.
Спасибо!
|
|
|
|
| |
С нами с 25.08.08
Сообщения: 18751
Рейтинг: 1251
|
| Добавлено: 17/03/14 в 19:35 |
<div id="descKeypad">Латинские буквы</div>
поменяй везде на <div class="descKeypad">Латинские буквы</div>
в скрипте везде тоже везде поменяй. допустим было $("#descKeypad").click(keypadOnOff);
поменяй на $(".descKeypad").click(keypadOnOff);
зы
учи матчасть.
|
|
|
|
| |
С нами с 09.03.09
Сообщения: 6053
Рейтинг: 3538
|
| Добавлено: 17/03/14 в 19:36 |
|
|
|
|
| |
Люблю то, что делаю!
С нами с 22.10.06
Сообщения: 5053
Рейтинг: 4418
|
| Добавлено: 17/03/14 в 19:53 |
| Magistrator писал: | <div id="descKeypad">Латинские буквы</div>
поменяй везде на <div class="descKeypad">Латинские буквы</div>
в скрипте везде тоже везде поменяй. допустим было $("#descKeypad").click(keypadOnOff);
поменяй на $(".descKeypad").click(keypadOnOff);
зы
учи матчасть. |
| Код: [развернуть] |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script type="text/javascript" src="../_js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="./js/myScript.js"></script>
<title>test</title>
</head>
<body>
<div class="descKeypad">Латинские буквы</div>
<div id="buttonKeypad">
<input type="button" value="A">
<input type="button" value="B">
<input type="button" value="C">
<input type="button" value="D">
<input type="button" value="E">
<input type="button" value="F">
<input type="button" value="G">
<input type="button" value="H">
</div>
<div class="descKeypad">Цифры</div>
<div id="buttonKeypad">
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="4">
<input type="button" value="5">
<input type="button" value="6">
<input type="button" value="7">
<input type="button" value="8">
</div>
</body>
</html>
|
| Код: [развернуть] |
$(document)
.ready(
function() {
$(".descKeypad").click(keypadOnOff);
$("#buttonKeypad*").hide();
}
);
function keypadOnOff(){
$("#buttonKeypad").toggle(500);
}
|
ничего как разварачился див идущий после дива с <div class="descKeypad">Латинские буквы</div>
так и есть, ничего не поменялось 
|
|
|
|
| |
С нами с 08.11.13
Сообщения: 41
Рейтинг: 14
|
| Добавлено: 17/03/14 в 20:06 |
Lexikon: не удержался))
чувак, не в первый раз читаю твои топики, забрось ты это дело, не твое это.
ты даже не можешь погуглить толком, да вообще, вон тебе Якк явно указал на решение, а ты не в состоянии понять, прочитать, понять. и это в каждом топике, просто фейл мозга какой-то, простите  
|
|
|
|
| |
С нами с 09.03.09
Сообщения: 6053
Рейтинг: 3538
|
| Добавлено: 17/03/14 в 20:11 |
|
|
|
|
| |
С нами с 09.03.09
Сообщения: 6053
Рейтинг: 3538
|
| Добавлено: 17/03/14 в 20:16 |
|
|
|
|
| |
Люблю то, что делаю!
С нами с 22.10.06
Сообщения: 5053
Рейтинг: 4418
|
| Добавлено: 17/03/14 в 20:46 |
| looking4work писал: | Lexikon: не удержался))
чувак, не в первый раз читаю твои топики, забрось ты это дело, не твое это.
ты даже не можешь погуглить толком, да вообще, вон тебе Якк явно указал на решение, а ты не в состоянии понять, прочитать, понять. и это в каждом топике, просто фейл мозга какой-то, простите |
Я не написал, что у меня нихера неработает, я ответил только там где я проверил и не пошло.
Далее я буду смотреть, что да как т.к. показали куда рыть.
Всё остальное, что ты написал, ну это мое лично дело.
Для меня всё это интересно и я не прошу писать код за меня, тем более мне тут ни кто ничего не должен, люди отзываются по собственному желанию, поэтому Отдельное спасибо, всем тем, кто подсказывает!!!
|
|
|
|
| |
Люблю то, что делаю!
С нами с 22.10.06
Сообщения: 5053
Рейтинг: 4418
|
| Добавлено: 17/03/14 в 23:01 |
У Yacc, было немного не то, ибо там при открывании другого закрывался один из открытых, я написл то что мне нужно
html
| Код: [развернуть] |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script type="text/javascript" src="../_js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="./js/myScript.js"></script>
<title>test</title>
</head>
<body>
<div>
<div class="description">Буквы</div>
<div class="keypad">A B C D E F H</div>
</div>
<div>
<div class="description">Цифры</div>
<div class="keypad">1 2 3 4 5 6 7 8 9 0</div>
</div>
</body>
</html>
|
JS
| Код: [развернуть] |
$(document)
.ready(
function() {
$(".description").css({border:"1px solid #b0b0b0", width:"300px", backgroundColor:"#cdcdcd"});
$(".description+.keypad").hide();
$(".description").click(function(){
var index = $(".description").index(this);
$(".description+.keypad").eq(index).toggle();
});
}
);
|
|
|
|
|
| |
С нами с 09.03.09
Сообщения: 6053
Рейтинг: 3538
|
| Добавлено: 17/03/14 в 23:13 |
|
|
|
|
| |
Люблю то, что делаю!
С нами с 22.10.06
Сообщения: 5053
Рейтинг: 4418
|
| Добавлено: 17/03/14 в 23:16 |
завтра гляну 
благодарю!
Кстати, а чем мой код плох плох?
|
|
|
|
| |
С нами с 09.03.09
Сообщения: 6053
Рейтинг: 3538
|
| Добавлено: 17/03/14 в 23:33 |
Он не универсален. Добавь к своему хтмл хуюквы и тебе придется дописывать в него пару строк, добавь хуифры - еще пару строк и т.д.
Мой в этом смысле тоже не идеален ибо изменив название классов в хтмл, придется менять их и в коде. Идеально писать сразу плагин. Типа так:
| Код: | (function ($) {
$.fn.foo = function () {
$(this).each(function (i, el) {
$(el)
.css({
border:"1px solid #b0b0b0",
width:"300px", backgroundColor:"#cdcdcd"
})
.off('click')
.on('click', function (e) {
$(el).next().toggle();
})
.next()
.hide();
});
}
})(jQuery); |
Тогда все становится просто:
| Код: | $(document).ready(function () {
$('.description').foo();
}); |
http://jsfiddle.net/yacc/aZ7Ce/14/
|
|
|
|
| |
Люблю то, что делаю!
С нами с 22.10.06
Сообщения: 5053
Рейтинг: 4418
|
| Добавлено: 18/03/14 в 09:11 |
| Yacc писал: | | Добавь к своему хтмл хуюквы и тебе придется дописывать в него пару строк, добавь хуифры - еще пару строк и т.д. |
Не совсем понял что под этим понимается, вот добавил символы и буквы нашего алфавита, вроде проблем не наблюдаю.
| Код: [развернуть] |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script type="text/javascript" src="../_js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="./js/myScript.js"></script>
<title>test</title>
</head>
<body>
<div>
<div class="description">Буквы</div>
<div class="keypad">A B C D E F H</div>
</div>
<div>
<div class="description">Цифры</div>
<div class="keypad">1 2 3 4 5 6 7 8 9 0</div>
</div>
<div>
<div class="description">Символы</div>
<div class="keypad">@ # % $ & ? = +</div>
</div>
<div>
<div class="description">Буквы</div>
<div class="keypad">А Б В Г Д Е Ж З</div>
</div>
</body>
</html>
|
|
|
|
|
| |
+ + +
С нами с 18.03.14
Сообщения: 43
Рейтинг: 30
|
| Добавлено: 18/03/14 в 10:01 |
| Lexikon писал: | По функциолналу нужно
1. Открываем страницу, всё свернуто (это на данном этапе сделано)
2. При клике по одному из диву #descKeypad должен развернуться див с кнопаками идущий за тем по которому кликнули |
id должен быть уникальным. поэтому надо юзать класс.
далее - городить огород для такого примитива я бы не стал. и each вообще не при чем. хотел проще - смотри сюда: | Код: [развернуть] | <div class="descKeypad">Латинские буквы</div>
<div>
<input type="button" value="A">
<input type="button" value="B">
<input type="button" value="C">
<input type="button" value="D">
<input type="button" value="E">
<input type="button" value="F">
<input type="button" value="G">
<input type="button" value="H">
</div>
<div class="descKeypad">Цифры</div>
<div>
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="4">
<input type="button" value="5">
<input type="button" value="6">
<input type="button" value="7">
<input type="button" value="8">
</div>
|
и js | Код: [развернуть] | $(function(){
$(".descKeypad").click(function(){ $(this).next().stop().toggle(500); });
});
|
зетс ол, фолкс. stop() для того, чтоб при 100500 нажатий не юзалась очередь откр/закр, а то заебет. а огород от Yacc $(this).each - выглядит странновато. this - текущий экземпляр, и откуда у него может быть each - мне не понятно... может я чего-то не знаю, но я уложился в одну короткую строку...
|
|
|
|
| |
С нами с 09.03.09
Сообщения: 6053
Рейтинг: 3538
|
| Добавлено: 18/03/14 в 13:21 |
| shlemkin писал: | | и откуда у него может быть each - мне не понятно |
Ну, так исходники товарищ Ресиг для кого под мит выложил? Как раз для таких как ты и Лексикон, но вам же похуй, главное в одну строчку уложиться. А через месяц ты будешь смотреть на свою строчку как баран на новые ворота, в то время как мой код он как песня, которую можно петь соло или хором, под гитару или с оркестром. И любой кому медведь на ухо не наступал легко угадает мелодию. 
Можно и без each, конечно. Но код был написан в образовательных целях, именно для того, чтобы показать что такое each и как с ним бороться. Тем более что в итоге все равно будет вызван метод .on в конце которого черным по белому написано:
| Код: | return this.each( function() {
jQuery.event.add( this, types, fn, data, selector );
}); |
|
|
|
|
| |
+ + +
С нами с 18.03.14
Сообщения: 43
Рейтинг: 30
|
| Добавлено: 18/03/14 в 13:39 |
а чё не так? объясни. это будет работать всегда.
и, кстати, ты вообще прошел мимо each. знаешь, ты слишком "обучен"
и ты как раз пример того, как можно НЕ ПОНИМАТЬ зачение - точнеее, взаимодействие всего с ичщььььь....
та работай себе. мне поху2. все твои оправдания выглядят не более чем... сам дорисуй..
|
|
|
|
| |
С нами с 09.03.09
Сообщения: 6053
Рейтинг: 3538
|
| Добавлено: 18/03/14 в 13:51 |
Ага, ага, узнаю стиль изложения. Еще пару постов и из тебе польется твоя истинная суть. Я пас.
|
|
|
|
| |
+ + +
С нами с 18.03.14
Сообщения: 43
Рейтинг: 30
|
| Добавлено: 18/03/14 в 13:55 |
| Yacc писал: | | Можно и без each, конечно |
ты тупо лоханулся. перестань себя возвышать над кем-либо. вот и формула... ты предложил в жс запихнуть кучу ненужного текста. тебя никто не просил об учебе. не учи. помоги - да. давай дальше мерятся....
|
|
|
|
| |
+ + +
С нами с 18.03.14
Сообщения: 43
Рейтинг: 30
|
| Добавлено: 18/03/14 в 13:57 |
| Yacc писал: | | Ага, ага, узнаю стиль изложения. Еще пару постов и из тебе польется твоя истинная суть. Я пас. |
ага ага
Последний раз редактировалось: shlemkin (19/03/14 в 03:50), всего редактировалось 1 раз
|
|
|
|
| |
Люблю то, что делаю!
С нами с 22.10.06
Сообщения: 5053
Рейтинг: 4418
|
| Добавлено: 18/03/14 в 14:12 |
а вот у меня возник вопрос.
я jQ начал разбирать пару дней назад, есть книги, всякие видеоуроки, где наглядно показаны некоторые методы, но порой хочется именно спросить.
Вот в коде stop(); [останавливает выполнение запущенной анимации для выбранного элемента.]
Т.е. остановка для toggle();?
просто я немогу понять, ведь toggle(); отработав сам остановится.
Удалял stop(); без него тоже всё работает, поэтому хотел спросить, чтоб разобраться, дляь чего именно тут stop();
Спасибо!
|
|
|
|
| |
+ + +
С нами с 18.03.14
Сообщения: 43
Рейтинг: 30
|
| Добавлено: 18/03/14 в 19:16 |
| Lexikon писал: | | Удалял stop(); без него тоже всё работает, поэтому хотел спросить, чтоб разобраться, дляь чего именно тут stop(); |
попробуй без стоп истерично давить на кнопку. создастся очередь, и шоу/хайд будут выполнятся по очереди. а стоп это остановит.
ЗЫ: немного подправлю, чтоб понятней было. сделай toggle(2500) без стопа - просто чтоб понять. и жмакай по диву раз 5-10 подряд. потом не жмакай. видишь, ты уже ничего не делаешь, а оно продолжает открывать/закрывать див. столько раз, сколько кликнул. и теперь добавь стоп - опля, заработало. перестало елозить без твоего ведома. вроде должен понять))
удачи.
|
|
|
|
| |
