Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > JQuery работа над элементами DOM в отдельности


Автор: spiderlab 10.8.2011, 13:26
Здравствуйте!
Есть код
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru" >
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Главная страница</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
        $(document).ready(function(){
        $("button#c").click(function () {
        $("div#t").slideToggle("slow");
        });
        });
        </script>
</head>
<body>
<button id='c'>Toggle</button>
<div id='t' style='border: 1px red solid; float: none; display: none;'>Some text1</div>

<button id='c'>Toggle</button>
<div id='t' style='border: 1px red solid; float: none; display: none;'>Some text2</div>

<button id='c'>Toggle</button>
<div id='t' style='border: 1px red solid; float: none; display: none;'>Some text3</div>

<button id='c'>Toggle</button>
<div id='t' style='border: 1px red solid; float: none; display: none;'>Some text4</div>
</body>
</html>


кнопки и слои под ними генерятся скриптом. Скрипт подразумевает что на главной странице сайта могут быть несколько новостей, поэтому выводит 4 блока. Когда жмёшь на кнопку раскрываются все слои, а надо только там где нажал. Как?

Автор: нуп 10.8.2011, 13:30
Нужно ставить разные id

Автор: spiderlab 10.8.2011, 13:37
Допустим разные ид можно... А как тогда обойтись одним блоком яваскрипт кода?. Просто я забыл как делается, что когда нажимаешь на кнопку, то идёт радота именно с этой кнопкой. Что-то связано с this

Автор: нуп 10.8.2011, 13:42
Код

$("button").click(function () {

Это для всех кнопок будет. Но вам ещё надо узнать какой именно div показать

Автор: spiderlab 10.8.2011, 13:43
Вот вот, а вот как это узнать? запара

Автор: нуп 10.8.2011, 13:59
Я так делаю
Код

<button ref="div_1">Toggle</button>
<div id='div_1' style='border: 1px red solid; float: none; display: none;'>Some text1</div>

<button ref="div_2">Toggle</button>
<div id='div_2' style='border: 1px red solid; float: none; display: none;'>Some text1</div>


Код

 $(document).ready(function(){
        $("button").click(function () {
                 var id = $(this).attr('ref');
                $("#" + id).slideToggle("slow");
         });
});

Автор: spiderlab 10.8.2011, 14:04
Я сделал точно так же

Код

<script>
        $(document).ready(function(){
        $("button").click(function () {
        var ti = $(this).attr("id");
        $("div#" + ti).slideToggle("slow");
        });
        });
        </script>


Но код не работает. Там что-то с кавычками, ибо этот код генерится через пхп вот так:

Код

$doc->addCustomTag('<script>
        $(document).ready(function(){
        $("button").click(function () {
        var ti = $(this).attr("id");
        $("div#" + ti).slideToggle("slow");
        });
        });
        </script>');

Автор: нуп 10.8.2011, 14:43
Так вы сравните мой код со своим

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)