Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Применение библиотек > jQuery. Работа с циклами.


Автор: DiMoN_TD 29.3.2008, 14:48
У меня смешная ситуация. И так:

Дано:

index.html

Код

<html>
<head>
</head>
<body>
<table>
    <tr>
        <td id="not"><input type="text" size="3" value="0" name="atack" maxlength="2"></td>
    </tr>
    <tr>
        <td id="not"><input type="text" size="3" value="0" name="def"></td>
    </tr>
    <tr>
        <td id="not"><input type="text" size="3" value="0" name="sm"></td>
    </tr>
    <tr>
        <td id="not"><input type="text" size="3" value="0" name="knol"></td>
    </tr>
    <tr>
        <td id="not"><input type="text" size="3" value="0" name="luck"></td>
    </tr>
    <tr>
        <td id="not"><input type="text" size="3" value="0" name="bd"></td>
    </tr>
    <tr>
        <td id="not"><input type="text" size="3" value="0" name="ini"></td>
    </tr>
</table>

<table border="1" width="100%">
    <tr>
        <td id="ring1" width="50" height="50">&nbsp;</td>
        <td id="head" width="50" height="50">&nbsp;</td>
        <td id="neck" width="50" height="50">&nbsp;</td>
        
        <td rowspan="3">&nbsp;</td>
        
    </tr>
    <tr>
        <td id="ring2" width="50" height="50">&nbsp;</td>
        <td id="body" width="50" height="50">&nbsp;</td>
        <td id="back" width="50" height="50">&nbsp;</td>
    </tr>
    <tr>
        <td id="right_arm" width="50" height="50">&nbsp;</td>
        <td id="foot" width="50" height="50">&nbsp;</td>
        <td id="left_arm" width="50" height="50">&nbsp;</td>
    </tr>
</table>
</body>
</html>


На этой же странице сл. скрипт работает:

Код

<script type="text/javascript" src="ajax/jquery-1.2.3.js"></script>
<script  type="text/javascript">

$(document).ready(function(){
    $("td").click(function(){
        var id_name = this.id;
        $("td").each(function(){
            if (this.id == false && this.id != 'not'){
                $(this).load("cloth/"+id_name+".php",null, function() {click_a()});
            }
        });
    });    
});

function click_a(){
        $("a").click(function(){
            var a = 0;
            var id_a = this.id;
            var name_a = this.name;
            var mod_atack = $("#"+this.id).attr("mod_atack");
            var mod_def = $("#"+this.id).attr("mod_def");
            var mod_sm = $("#"+this.id).attr("mod_sm");
            var mod_knol = $("#"+this.id).attr("mod_knol");
            var mod_luck = $("#"+this.id).attr("mod_luck");
            var mod_bd = $("#"+this.id).attr("mod_bd");
            var mod_ini = $("#"+this.id).attr("mod_ini");
            
            var cont = $("#"+id_a).text();
            $("td").each(function(){
                if(name_a == this.id){
                    $("#"+this.id).html(cont);
                }
            });
            
            $("input").each(function(){
                if (a != 0){
                    if (this.name == 'atack'){
                        this.value = this.value*1 + mod_atack*1;
                    }
                    a = a + 1;
                    alert (a);
                }
            });
        });
}

</script>


Код

Одна из подгружаемых страниц:

<?
    include("/home/pereodevalka/www/blocks/db.php");
    
    $result = mysql_query("SELECT * FROM cloth WHERE type='Кольцо'");
?>

<table cellpadding="0" cellspacing="0" border="1">
    <?
        while ($myrow = mysql_fetch_array($result)){
            echo "<tr>
                    <td><a href='#' id='".$myrow["id"]."' 
                    name='ring1' 
                    lvl='".$myrow["lvl"]."' 
                    mod_atack='".$myrow["mod_atack"]."' 
                    mod_def='".$myrow["mod_def"]."' 
                    mod_sm='".$myrow["mod_power_mage"]."' 
                    mod_knol='".$myrow["mod_knol"]."' 
                    mod_luck='".$myrow["mod_luck"]."' 
                    mod_bd='".$myrow["mod_bd"]."' 
                    mod_ini='".$myrow["mod_ini"]."'>".$myrow["name"]."</a></td>
                  </tr>
            ";
        }
    ?>
</table>



Так вот. У меня почему то в браузере при нажатии на ссылку проход по each'у происходит НЕСКОЛЬКО раз. Причём когда нажимаешь первый раз на ссылку, то цикл как и полагается проходит один раз. Как только я нажимаю второй раз по той же ссылке, то кол-во циклов возврастает, причём непонятно как. Есть ли у кого-то идеи по этой проблеме? я кстати потому и поставил в функции click_a переменную a, типа если один раз нажали, то условие должно один раз и сработать, но опять же, при повторном нажатии Почему то это условие игнорируется и всё равно происходит запись в поле инпут. Может есть какая-то специфика функции each, о которой я не знаю?
Заранее благодарю.

Автор: DiMoN_TD 29.3.2008, 16:15
В общем оказывается цикл проходит сл. образом:

При первом клике - 1 раз проходит цикл как и полагается.

При втором клике - 3 раза.

При третьем - 5 раз.

И т.д. +2 к последнему числу итераций. Почему это именно так происходит - никак не могу разобраться. Может кто-то скажет? Заранее спасибо!

Автор: solenko 29.3.2008, 16:22
DiMoN_TD, ну так вы же при каждом клике на td добавляете еще один обработчик клика по ссылке
Код

function click_a(){
        $("a").click(function(){...}

причем вызывается этот код несколько раз (сколько, сколько ячеек удовлетворяет   if (this.id == false && this.id != 'not') )

Автор: DiMoN_TD 29.3.2008, 16:41
Добавляется?????  smile 

Мдя.. а фигли он добавляется?

Хорошо, ну а как тогда избежать мне этой проблемы?

Я попытался функцию load вызвать вне "клика", т.е.:

Код

$(document).ready(function(){
    $("td").click(function(){
        var id_name = this.id;
    });    
     $("td").each(function(){
            if (this.id == false && this.id != 'not'){
                $(this).load("cloth/"+id_name+".php",null, function() {click_a()});
            }
     });
});


Но переменная id_name почему то не хочет запоминаться уже в функции each, собственно мне теперь и сравнивать не с чем. Ступор в общем у меня :(

Автор: solenko 29.3.2008, 16:52
DiMoN_TD, вы можете словами описать что вам нужно сделать? 
А то я что-то не могу понять смысла... Получается что, по клику на ячейку, вы перебираете все td-шки и выполняете запрос на один и тот же адрес для каждой из них. У меня ступор уже в этом месте...

Автор: DiMoN_TD 29.3.2008, 17:08
У меня есть таблица, как вы видите, разделённая на две части. С одной стороны td-шки с определёнными id-ками, имена которых совпадают с именнами подгружаемых файлов. Собственно при нажатии на одну из этих ячеек в правой части таблицы подгружается определённая страница. В этой странице php скриптом идёт выборка нужной мне информации. Далее. Т.к. работать с подгруженной информацией можно только так:

Код

$(this).load("cloth/"+id_name+".php",null, function() {click_a()});


то мне пришлось создать функцию под названием click_a (т.е. при нажатии на ссылку происходит определенное действие).

Собственно в той функции при нажатии, я передаю параметры, которые записываю в переменные. Ну а дальше я уже совершаю действия с этими переменными, ищу нужные мне td-ки, input-ы и т.д. Хм. Меня тут осенило. А может попробовать не проходиться каждый раз по эти td-кам, а использовать функцию .find ?? smile

В общем жду ваших комментариев! Спасибо! smile

Автор: solenko 29.3.2008, 17:49
Тогда непонятног зачем вам форич в обработчике клика по ячейке.
Код

$(document).ready(function(){
  $('td').click(function(){
     if (this.id == false && this.id != 'not'){
       $(this).load("cloth/"+this.id+".php",null, function() {
//обработка полученных данных
       });
     }
  });
});



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

Автор: DiMoN_TD 29.3.2008, 18:12
solenko, 

Ну вот сделал я так:

Код

$(document).ready(function(){
    $("td").click(function(){
        var id_name = this.id;
        $("td").each(function(){
            if (this.id == 'load'){
                $(this).load("cloth/"+id_name+".php",null, function() {
                    $("a").click(function(){
                        var id_a = this.id;
                        var name_a = this.name;
                        alert(name_a);
                        var mod_atack = $("#"+this.id).attr("mod_atack");
                        var mod_def = $("#"+this.id).attr("mod_def");
                        var mod_sm = $("#"+this.id).attr("mod_sm");
                        var mod_knol = $("#"+this.id).attr("mod_knol");
                        var mod_luck = $("#"+this.id).attr("mod_luck");
                        var mod_bd = $("#"+this.id).attr("mod_bd");
                        var mod_ini = $("#"+this.id).attr("mod_ini");
                        
                        var cont = $("#"+id_a).text();
                        $("td").each(function(){
                            if(name_a == this.id){
                                $("#"+this.id).html(cont);
                            }
                        });
                        
                        $("input").each(function(){
                                if (this.name == 'atack'){
                                    this.value = this.value*1 + mod_atack*1;
                                }
                                if (this.name == 'def'){
                                    this.value = this.value*1 + mod_def*1;
                                }
                        });
                    });
                });    
            }
        });
    });    
});


Ну  а теперь кол-во циклов увеличивается с каждым разом на 1 :(

Т.е. первый раз он проходится один раз, второй - два раза, третий - три, ну и т.д. А функция клик, должна была мне добавлять именно тот элемент, на который я нажал, и именно в ту ячейку, куда собственно, ей и нужно встать. К сожалению, из-за этих циклов, у меня ничего не получается.. Эм. Ну впринципе всё работает, но когда дело доходит до каких-либо подсчётов, конечно же из-за того, что у меня циклы каждый раз увеличиваются - подсчёты происходят неверно. :(

Автор: solenko 29.3.2008, 18:59
DiMoN_TD,
1. в моем примере есть foreach? Нету. А в вашем зачем он?
2. Зачем вы НАВЕШИВАЕТЕ ОБРАБОТЧИК на клик по любой ссылке?

Автор: DiMoN_TD 29.3.2008, 23:04
solenko, 
1. Как зачем? Я же при клике нахожу td  с id = load и подргружаю туда свою страницу. А как иначе без прохода по td-шкам? Не подскажите? Я попробовал что Вы предложили, но это не работает, собственно оно и понятно почему. :( Или может я Вас не правильно понял?
2. Ну как же? У меня у каждой ссылки есть свои уникальные аттрибуты, которые собственно я и считываю. Потому я при клике собираю эти аттрибуты и в дальнейшем я их применяю. А собственно как мне это иначе организовать?

З.Ы. признателен Вам за ответы smile Извините за мои нубские вопросы, просто мне это интересно, вот я и начал этим заниматься относительно недавно.

Автор: solenko 30.3.2008, 02:43
Цитата(DiMoN_TD @  29.3.2008,  22:04 Найти цитируемый пост)
 А как иначе без прохода по td-шкам? Не подскажите?

Подскажу. $('td#load').html('моя_страница');, или просто $('#load').html('моя_страница');
Цитата(DiMoN_TD @  29.3.2008,  22:04 Найти цитируемый пост)
А собственно как мне это иначе организовать?

Один раз при загрузке документа навесить обработчик на клик по ссылке. 
Еще раз перечитать разлел документации селекторы и пользоваться ими а не foreach.  
Добавить глобальную переменную, в которую заносить id активной ячейки.
Четко сформулировать задачу. Потому как то, что вы описали и то, что делает ваш код -- две большие разницы.

Автор: DiMoN_TD 31.3.2008, 09:24
solenko, 
Всё, я впринципе разобрался. А что собственно происходило?
Жмёшь на нужную ячейку в левой части таблицы, в правую часть таблицы (т.е. опять же в td-шку) подгружается нужная мне страница. Я нажимал на ссылку из подгруженной информации и мне вся эта инфа передавалась в нужную td-шку. Так вот тут и был косяк, т.к. информация подгружалась в TD-шку, при клике на которую у меня снова вызывалась функция $("td").click(function(){...}); и конечно же всё это происходило повторно. Хотя визуально ничего не изменялось, но на деле информация снова и снова подгружалась, снова и снова считалась, ну в общем всё это решилось тем, что информацию я подгружаю теперь не в td, а в div =)



Теперь ещё один вопрос: может ли функция $("td").click(function(){...}); возвращать мне переменные return'ом??

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