jQuery Mobile .each () преждевременно завершает работу

0

Я пытаюсь написать приложение для настольной RPG. То, что я сделал, это создать список игроков (в списке) и пропустить каждую из них.

Что должно случиться: каждый раз, когда игрок поворачивается, элемент списка игроков подсвечивается (изменение цвета), и появляется всплывающее окно. Пользователь вводит количество принятых действий. Затем он перейдет к следующему игроку в списке.

Что на самом деле происходит: первый игрок в списке подсвечивается, появляется всплывающее окно, пользователь отправляет # действий... и затем все останавливается.

Я пытаюсь понять, почему он выходит из.each(). Нет никаких перерывов/возврата false, которые я вижу. Интересно, я пропустил что-то простое, или, может быть, это более сложная проблема, чем я думал.

Вот код для просмотра списка:

<ul id="combat_list" data-role="listview" data-inset="true" data-theme="a" data-count-theme="a">
    <li data-role="list-divider">Combat Round: <?php echo $round; ?><span class="combat_result"></span></li>
    <?php
        for ($i = 0; $i < $numrows; $i++) {
    ?>
            <li id="combatant"><h3 class="ui-li-heading"><span class="player_name"><?php echo $member[$i]['player_name']; ?></span></h3><span class='ui-li-count'><?php echo $member[$i]['player_total_init']; ?></span>
                <p class="ul-li-desc"><strong>Actions Remaining: </strong><span class="remaining"><?php echo $member[$i]['player_actions_remain']; ?></span></p>
            </li>
    <?php
         }
    ?>

И вот мой jQuery:

        $('#combatant').each(function(index, value) {
            $(this).attr('data-theme', 'b');
            $('#combat_list').listview("refresh");
            $(this).buttonMarkup();
            var actions_remaining = $(this).find('.remaining').text();
            var combatant_name = $(this).find('.player_name').text();
            var combat_id = '<?php echo $combatid; ?>';             
            $("#data_holder").data({"curr_actions_remaining" : actions_remaining});

            $("#enter_num_actions").popup({
                    beforeposition: function( event, ui ) {
                        $("#data_holder").data({"combatant_name": combatant_name, "combat_id": combat_id});
                    },
                    afterclose: function( event, ui ) {
                        $('#combat_list').listview("refresh");
                    }
            }); 
        });

Я не понимаю, почему это происходит только в первом экземпляре #combatant. В моих тестах есть три экземпляра. Он всегда останавливается после первого.

Если у кого-то есть предложения, я ценю это. Заранее спасибо!

Теги:
jquery-mobile

1 ответ

2
Лучший ответ

Вы не должны использовать один и тот же идентификатор для более чем одного элемента DOM, этот атрибут должен быть уникальным идентификатором. Вместо этого используйте атрибут class и $('.combatant') чтобы выбрать их.

  • 0
    Спасибо за совет. Это, безусловно, меняет поведение. Тем не менее, теперь он проходит через всю серию элементов без остановки во всплывающем окне. Но я полагаю, что это другой вопрос / проблема. Спасибо за вашу помощь. :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню