Массив и цикл while: сделать уникальным интерактивным

ProgramBox

Массив и цикл while: сделать уникальным интерактивным

Post author:admin
Запись опубликована:28 марта, 2023
Post category:Вопросы по программированию

#javascript #jquery #arrays #while-loop

#javascript #jquery #массивы #цикл while

Вопрос:

У меня есть массив (через ajax), который выглядит следующим образом:

 data[i].id: gives the id of user i
data[i].name: gives the name of user i

Я хочу вывести массив следующим образом:

 X Leonardo Da Vinci
X Albert Einstein
X William Shakespeare
...

Крестик — это изображение (x.gif ) это должно быть интерактивным. При нажатии он должен перейти к functiontwo(), передавая данные параметра[i].id. Functiontwo откроет диалоговое окно jquery с вопросом «Удалить идентификационные данные [i].id»?

Я знаю, что это не может быть слишком сложно сделать, но, похоже, я не могу в этом разобраться… Это то, что у меня есть до сих пор:

 function functionone() {


    $.ajax({
        type : 'POST',
        url : 'post.php',
        dataType : 'json',
        success : function(data){

            var message = "";
            var i = 0;


            while (i < (data.length - 1))
                            {
                 var myvar = data[i].id;
                 message = message   "<div class="   data[i].id   "><img src=x.gif></div>"   data[i].name   "<br />";


                 $('#somediv').html(message).fadeIn('fast');
                  $("."   data[i].id   "").click(function () {
                  functiontwo(myvar);
                });
                i  ;

            }



        }


    });

}

 function functiontwo(id) {
 ...}

Я знаю, почему это не работает. Переменная i заполняется снова и снова в цикле while. Когда цикл while останавливается, i — это просто число (в данном случае длина массива), и jquery становится (например):

 $("."   data[4].id   "").click(function () {
                  functiontwo(myvar);
                });

, делая интерактивным только последний X.

Как я могу это исправить? Большое спасибо!!!

Редактировать:

Это моя 2-я функция:

  function functiontwo(id) {

  $("#dialogdelete").dialog("open");

     $('#submitbutton').click(function () {

        $('#submitbutton').hide();
        $('.loading').show();
                    $.ajax({
        type : 'POST',
        url : 'delete.php',
        dataType : 'json',
        data: {
            id : id
        },
        success : function(data){

            var mess = data;
            $('.loading').hide();
            $('#message').html(mess).fadeIn('fast');


        }
    });

    //cancel the submit button default behaviours
    return false;



        });


    }

В delete.php там нет ничего особенного, я использовал $_POST[‘id’].

1. Шаг первый — использовать bind, а не click, для создания прослушивателя событий.

2. Не могли бы вы быть более конкретными? Я пытался $("." data[id].id "").bind('click',function() { make_event_handler(myvar)}); , но это тоже не сработало…

3. Смотрите мой ответ ниже. решение класса проще

Ответ №1:

Как я указал в своем комментарии. Проблема заключается в .click части. Либо используйте bind, либо используйте класс для всех элементов и событие щелчка, подобное этому $('.classnamehere').live('click',function () { // stuff });

1. Я изменил .click часть на $("." data[i].id "").live('click',function () {functiontwo(myvar)}); . Это делает каждый X интерактивным, однако параметр, который передается функции (в случае myvar), всегда один и тот же: идентификатор последнего пользователя.

2. Вам нужно передать данные [i].id как идентификатор, а не класс. И применить один и тот же класс для каждого объекта. И live-listner может быть создан вне функции. Смотрите мой новый ответ

Ответ №2:

 function functionone() {

    $.ajax({
        type : 'POST',
        url : 'post.php',
        dataType : 'json',
        success : function(data){

            var message = "";
            var i = 0;

            while (i < (data.length - 1))
                            {
                 var myvar = data[i].id;
                 message = message   "<div class="clickable" id="   data[i].id   "><img src=x.gif></div>"   data[i].name   "<br />";

                 $('#somediv').html(message).fadeIn('fast');
                i  ;
            }
        }
    });
}

$('.clickable').live('click',function () {
    alert($(this).attr('id')   ' this is your ID');
});

1. При ближайшем рассмотрении оказывается, что это работает не так, как должно быть. Он передает параметр, но он «запоминает» его слишком долго: нажатие X переходит к functiontwo (id), который выдает пользователю jquerypopup с сообщением «удалить этого пользователя?» и кнопкой отправки. Когда вы нажимаете на крестик рядом с пользователем 1, закрываете диалоговое окно (не нажимая кнопку отправки), нажимаете Крестик рядом с пользователем 3 и нажимаете отправить, удаляется не только пользователь3 (что ему и нужно сделать), но и пользователь1 … это, конечно, не то, что мне нужно… Как я могу исправить эту последнюю проблему? спасибо!

2. Ну, это зависит от того, как работает ваша 2-я функция. Проблема не в том, что здесь опубликовано. Вы проверили свой код на уникальность идентификаторов?

3. Да, я уверен, что идентификаторы уникальны. Я отредактирую свой первый пост и добавлю туда свою 2-ю функцию.

4. Я думаю, ваша проблема в том, что когда вы нажимаете на поле, вы не сбрасываете содержимое диалогового окна. Используйте Firebug (и FF), чтобы проверить, когда скрипт (delete.php ) загружается.

Ответ №3:

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

 make_event_handler(name){
    return function(){
        functiontwo(name);
    };
}

...

$("."   data[i].id   "").click( make_event_handler(myvar) );

1. Думал, что это помогло бы, но, по-видимому, ничего не изменилось. Последний X является интерактивным, остальные — нет…

2. Это должно было сработать. Можете ли вы предоставить минимальный пример функционирования (возможно, в JSFiddle)