JQuery > Master-X.com

Главная » Форум » Программинг, Скрипты, Софт, Сервисы »

Тема: JQuery

цитата
17/03/14 в 19:30

Lexikon
По функциолналу нужно
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, то получается бред, вероятно есть выход достаточно простой?
Подскажите кто знает.
Спасибо!

цитата
17/03/14 в 19:35

Magistrator
<div id="descKeypad">Латинские буквы</div>
поменяй везде на <div class="descKeypad">Латинские буквы</div>

в скрипте везде тоже везде поменяй. допустим было $("#descKeypad").click(keypadOnOff);
поменяй на $(".descKeypad").click(keypadOnOff);

зы
учи матчасть.

цитата
17/03/14 в 19:36

Yacc
Намекаю толсто:
Код:

$(".class").each(function (index, element) {
console.log(index, element);
});

https://api.jquery.com/jQuery.each/

цитата
17/03/14 в 19:53

Lexikon
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>
так и есть, ничего не поменялось

цитата
17/03/14 в 20:06

looking4work
Lexikon: не удержался))

чувак, не в первый раз читаю твои топики, забрось ты это дело, не твое это.
ты даже не можешь погуглить толком, да вообще, вон тебе Якк явно указал на решение, а ты не в состоянии понять, прочитать, понять. и это в каждом топике, просто фейл мозга какой-то, простите

цитата
17/03/14 в 20:11

Yacc
^ Не, не, ты не прав. Учиться никогда не поздно, Ленин еще завещал.

http://jsfiddle.net/yacc/aZ7Ce/

цитата
17/03/14 в 20:16

Yacc
Еще вот такая штука есть: http://jsfiddle.net/yacc/GVq9d/

цитата
17/03/14 в 20:46

Lexikon
looking4work писал:

Lexikon: не удержался))

чувак, не в первый раз читаю твои топики, забрось ты это дело, не твое это.
ты даже не можешь погуглить толком, да вообще, вон тебе Якк явно указал на решение, а ты не в состоянии понять, прочитать, понять. и это в каждом топике, просто фейл мозга какой-то, простите

Я не написал, что у меня нихера неработает, я ответил только там где я проверил и не пошло.
Далее я буду смотреть, что да как т.к. показали куда рыть.
Всё остальное, что ты написал, ну это мое лично дело.
Для меня всё это интересно и я не прошу писать код за меня, тем более мне тут ни кто ничего не должен, люди отзываются по собственному желанию, поэтому Отдельное спасибо, всем тем, кто подсказывает!!!

цитата
17/03/14 в 23:01

Lexikon
У 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();
            });
      }
   );

цитата
17/03/14 в 23:13

Yacc
Вот так

http://jsfiddle.net/yacc/aZ7Ce/

будет работать не только с буквами и цифрами, но и с хуюквами и хуифрами.

цитата
17/03/14 в 23:16

Lexikon
завтра гляну

благодарю!

Кстати, а чем мой код плох плох?

цитата
17/03/14 в 23:33

Yacc
Он не универсален. Добавь к своему хтмл хуюквы и тебе придется дописывать в него пару строк, добавь хуифры - еще пару строк и т.д.

Мой в этом смысле тоже не идеален ибо изменив название классов в хтмл, придется менять их и в коде. Идеально писать сразу плагин. Типа так:

Код:

Тогда все становится просто:

Код:

$(document).ready(function () {
$('.description').foo();
});

http://jsfiddle.net/yacc/aZ7Ce/14/

цитата
18/03/14 в 09:11

Lexikon
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 в 10:01

shlemkin
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 - мне не понятно... может я чего-то не знаю, но я уложился в одну короткую строку...

цитата
18/03/14 в 13:21

Yacc
shlemkin писал:

и откуда у него может быть each - мне не понятно

Ну, так исходники товарищ Ресиг для кого под мит выложил? Как раз для таких как ты и Лексикон, но вам же похуй, главное в одну строчку уложиться. А через месяц ты будешь смотреть на свою строчку как баран на новые ворота, в то время как мой код он как песня, которую можно петь соло или хором, под гитару или с оркестром. И любой кому медведь на ухо не наступал легко угадает мелодию.

Можно и без each, конечно. Но код был написан в образовательных целях, именно для того, чтобы показать что такое each и как с ним бороться. Тем более что в итоге все равно будет вызван метод .on в конце которого черным по белому написано:

Код:

return this.each( function() {
jQuery.event.add( this, types, fn, data, selector );
});

цитата
18/03/14 в 13:39

shlemkin
а чё не так? объясни. это будет работать всегда.
и, кстати, ты вообще прошел мимо each. знаешь, ты слишком "обучен"
и ты как раз пример того, как можно НЕ ПОНИМАТЬ зачение - точнеее, взаимодействие всего с ичщььььь....
та работай себе. мне поху2. все твои оправдания выглядят не более чем... сам дорисуй..

цитата
18/03/14 в 13:51

Yacc
Ага, ага, узнаю стиль изложения. Еще пару постов и из тебе польется твоя истинная суть. Я пас.

цитата
18/03/14 в 13:55

shlemkin
Yacc писал:

Можно и без each, конечно

ты тупо лоханулся. перестань себя возвышать над кем-либо. вот и формула... ты предложил в жс запихнуть кучу ненужного текста. тебя никто не просил об учебе. не учи. помоги - да. давай дальше мерятся....

цитата
18/03/14 в 13:57

shlemkin
Yacc писал:

Ага, ага, узнаю стиль изложения. Еще пару постов и из тебе польется твоя истинная суть. Я пас.

ага ага

Последний раз редактировалось: shlemkin (19/03/14 в 03:50), всего редактировалось 1 раз

цитата
18/03/14 в 14:12

Lexikon
а вот у меня возник вопрос.
я jQ начал разбирать пару дней назад, есть книги, всякие видеоуроки, где наглядно показаны некоторые методы, но порой хочется именно спросить.
Вот в коде stop(); [останавливает выполнение запущенной анимации для выбранного элемента.]

Т.е. остановка для toggle();?

просто я немогу понять, ведь toggle(); отработав сам остановится.
Удалял stop(); без него тоже всё работает, поэтому хотел спросить, чтоб разобраться, дляь чего именно тут stop();
Спасибо!

цитата
18/03/14 в 19:16

shlemkin
Lexikon писал:

Удалял stop(); без него тоже всё работает, поэтому хотел спросить, чтоб разобраться, дляь чего именно тут stop();

попробуй без стоп истерично давить на кнопку. создастся очередь, и шоу/хайд будут выполнятся по очереди. а стоп это остановит.
ЗЫ: немного подправлю, чтоб понятней было. сделай toggle(2500) без стопа - просто чтоб понять. и жмакай по диву раз 5-10 подряд. потом не жмакай. видишь, ты уже ничего не делаешь, а оно продолжает открывать/закрывать див. столько раз, сколько кликнул. и теперь добавь стоп - опля, заработало. перестало елозить без твоего ведома. вроде должен понять))
удачи.

Новая тема Ответить

Эта страница в полной версии