как создать несколько точек останова в сценарии js для его отладки - PullRequest
Новая
       8

как создать несколько точек останова в сценарии js для его отладки

0 голосов
/ 27 мая 2020

У меня есть две страницы с похожим содержанием, и на обеих используется вкладка bootstrap для отображения данных. Эти вкладки представляют собой шаги мастера, поэтому я не хочу, чтобы пользователи уходили с текущей вкладки, щелкая другую. Итак, я написал этот небольшой js, чтобы проверить, есть ли на вкладке "отключенный" класс, который предотвратит переход на эту вкладку.

На одной странице он работает нормально, на другой он не определяет "отключенный" класс, и поэтому при щелчке по заголовку открывается новая вкладка. Я ищу предложение о том, как создать несколько точек останова в моем js коде и понять, где он ломается. Это потому, что в моем коде явно есть что-то, что не работает, но я не могу найти что. Оператор журнала консоли внутри блока if никогда не выполняется. 

<div class="wizard-inner">
    <div class="connecting-line colored-line"></div>
        <ul class="nav nav-tabs" role="tablist" id="navigator">
            <li role="presentation" class="active">
                <a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Crea il tuo form">
                    <span class="round-tab">
                        <i class="glyphicon glyphicon-user"></i>
                    </span>
                </a>
            </li>

            <li role="presentation" class="disabled">
                <a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Scegli i campi da visualizzare">
                    <span class="round-tab">
                        <i class="glyphicon glyphicon-book"></i>
                    </span>
                </a>
            </li>
            <li role="presentation" class="disabled">
                <a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Anteprima">
                    <span class="round-tab">
                        <i class="glyphicon glyphicon-credit-card"></i>
                    </span>
                </a>
            </li>

            <li role="presentation" class="disabled">
                <a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Scegli gli utenti">
                    <span class="round-tab">
                        <i class="glyphicon glyphicon-ok"></i>
                    </span>
                </a>
            </li>
        </ul>
</div>

$(document).ready(function() {

    /* Controlli del wizard */
    //TODO verifica perchè posso andare avanti cliccando sugli elementi anche se sono disabilitati
    //Initialize tooltips
    $('.nav-tabs > li a[title]').tooltip();
    $('.bs-glyphicons-list > li[title]').tooltip();
    //Wizard
    //inizializzo mostrando solo il primo
    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
        var $target = $(e.target);
        if ($target.parent().hasClass('disabled')) {
            console.log('sono qui');
            return false;
        }
    });
});

1 Ответ

1 голос
/ 27 мая 2020

Я предполагаю, что вы хотите протестировать только следующий блок: 

    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
        var $target = $(e.target);
        if ($target.parent().hasClass('disabled')) {
            console.log('sono qui');
            return false;
        }
    });

Прежде всего, я бы попытался извлечь $('a[data-toggle="tab"]') и проверить, существует ли он: 

const elements = $('a[data-toggle="tab"]'); // NEW
console.log(elements); // NEW
elements.on('show.bs.tab', function (e) { // NEW
        var $target = $(e.target);
        if ($target.parent().hasClass('disabled')) {
            console.log('sono qui');
            return false;
        }
});

Обратите внимание, что я не сделал этого, просто сделав копию оператора $('a[data-toggle="tab"]'), потому что я хочу быть на 100% уверен, что то, что я печатаю на консоль, - это то же самое, что я использую далее в коде ( не нравится этот код): 

const elements = $('a[data-toggle="tab"]'); // NEW
console.log(elements); // NEW
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) { // CHANGE HERE TO VARIABLE TOO!!!
        var $target = $(e.target);
        if ($target.parent().hasClass('disabled')) {
            console.log('sono qui');
            return false;
        }
});

Если все в порядке и вы видите элементы, вернитесь к предыдущему коду, и следующий шаг - проверить, запускается ли событие show.bs.tap на каком-либо из этих элементов: 

    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
        console.log(e); // NEW
        var $target = $(e.target);
        if ($target.parent().hasClass('disabled')) {
            console.log('sono qui');
            return false;
        }
    });

Если вы выполняете действие и событие выводится на консоль, проверьте, есть ли цель: 

    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
        var $target = $(e.target);
        console.log($target); // NEW
        if ($target.parent().hasClass('disabled')) {
            console.log('sono qui');
            return false;
        }
    });

Имеет цель? Проверьте, есть ли у него родительский элемент: 

    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
        var $target = $(e.target);
        const parent = $target.parent() // NEW
        console.log(parent) // NEW
        if (parent.hasClass('disabled')) { // NEW
            console.log('sono qui');
            return false;
        }
    });

Просмотрите распечатку parent в консоли с помощью раскрывающихся списков и найдите, есть ли у него необходимый класс.

На одном из этих шагов вы найдет синтаксическую или логическую ошибку в вашем коде.

Удачи! :)

...