Question

我有一个可重用的模态代码，可用来轻松加载多个模态。我遇到的问题是我使用了div来显示使用ID设置的错误。当我尝试在第二个模式中显示错误时，显然它没有用，因为您不能有多个具有相同ID的元素。

我想调整jQuery代码，以消除模式窗口打开时的所有错误。

这是我的模态代码。

function loadModal($modalNum, $modalTitle, $modalFile) {

echo '<!-- The Modal -->
    <div id="'.$modalNum.'" class="modal">  

    <!-- Modal content -->
    <div class="modalContent">
        <div class="modalHeader">
            <span class="close">&times;</span>
            <h2>'.$modalTitle.'</h2>
        </div>

        <div class="modalBody">
            <!-- Error section -->
            <div class="errors"></div>

            <!-- include form to show -->';
            include($modalFile);


    echo '      </div>
                    </div>
                </div>';

}

我要定位的上面这段代码。

<!-- Error section -->
<div class="errors"></div>

这是加载窗口的脚本。

    $('.openModal').on('click', function(){


    $('#'+$(this).data('modal')).css('display','block');
    $("#form")[0].reset();
    while ($('.errors').firstChild) {
    $('.errors').removeChild($('.errors').firstChild);
            }
    })

这是我不知道的代码部分。

while ($('.errors').firstChild) {
  $('.errors').removeChild($('.errors').firstChild);
}

在将其更改为尝试阅读此类的类之前。这也是我的html模态将div作为id <div id='errors'></div>的时候。

while (errors.firstChild) {
  errors.removeChild(errors.firstChild);
}

如何使用该类更改此部分代码以定位我的错误div ？

Answer 1

您可以scope搜索或find模态内的元素，两者将返回相同的元素。同样，empty方法更方便。您也可以对其他元素使用相同的方法，例如您要定位的form：

$('.openModal').on('click', function(){
    targetModal = $('#'+$(this).data('modal'));
    $("#form")[0].reset();
    // Both are equivalent
    errors = $(".errors", targetModal);
    errors = targetModal.find(".errors");
    errors.empty();

    targetModal.css('display','block');
});

如何调整此jQuery代码为目标div？

1 个答案: