javascript - 如何在 JQuery 中设置当前 <li> 选项卡

Question

所以，最初我有这个 html 代码，我试图实现 <li>将动态添加到 <ul> 中

<ul class="tabs" id="modal_addquestion_ul">
    <li class="tab-link current" data-tab="multipleChoice">Multiple Choice</li>
    <li class="tab-link" data-tab="trueOrFalse">True or False</li>
    <li class="tab-link" data-tab="fillInTheBox">Fill in the Box</li>
</ul>

当前选项卡设置为多项选择。

现在，我在 JQuery 中创建了一个方法来动态添加 <li>到 <ul> 数据来 self 创建的数据库。

function loadQuestionTypesToULTab(ULId){
    $.ajax({
        url: 'controller/get_all_question_types.php',
        type: 'POST',
        dataType: 'json',
        success: function (questionTypeData) {
            console.log(questionTypeData);
            var len = questionTypeData.length;
            clearListItemsOf(ULId);
            for (var i = 0; i < len; i++) {
                var questionTypeId = questionTypeData[i]['questionTypeId'];
                var questionType = questionTypeData[i]['questionType'];
                var listItem = $('<li></li>').val(questionTypeId)
                                .text(questionType).addClass('tab-link').attr('data-tab',questionType);
                $(ULId).append(listItem);
                //$(ULId).append("<li class='tab-link'+' current' value='" + questionTypeId + "' >"    + questionType +    "</li>" );
            }
        },
        error: function (x, e) {
            handleError(x, e);
        }
    });
}

当我使用 Google Chrome 的检查器查看 JQuery 方法是否准确翻译了上面原始 html 的编写方式时，它几乎正确除了它未设置 多项选择作为当前 <li>或选项卡。

当 <li> 时谷歌浏览器检查器中的输出的被检查:

<li value="1" class="tab-link" data-tab="Multiple Choice">Multiple Choice</li>
<li value="2" class="tab-link" data-tab="Fill in the Box">Fill in the Box</li>
<li value="3" class="tab-link" data-tab="True or False">True or False</li>

我需要在我的 JQuery 代码中添加什么才能生成，

多项选择

注意类值是tab-link current

我试过了 .addClass('tab-link current');但只需要 tab-link并在 html 中删除 current。

如，

<li value="1" class="tab-link" data-tab="Multiple Choice">Multiple Choice</li>

没有 current 作为名称类的一部分。

谢谢。

Answer 1

正如您所说，您确实还需要专门添加不在您的主代码示例中的类“current”。

您说您尝试了 addClass('tab-link current') 但我们无法在您的整个代码的上下文中看到它。您有一条注释掉的行，但它本身没有意义，因为它适用于所有项目并且似乎来自您代码的早期迭代。

您的代码如何知道哪个项目应该获得当前类(如果有)？也许尝试这样的事情(在这种情况下将第一项设置为当前):

success: function (questionTypeData) {
        var len = questionTypeData.length;
        clearListItemsOf(ULId);
        for (var i = 0; i < len; i++) {
            var questionTypeId = questionTypeData[i]['questionTypeId'];
            var questionType = questionTypeData[i]['questionType'];
            var listItem = $('<li></li>').val(questionTypeId)
                            .text(questionType).addClass('tab-link').attr('data-tab',questionType);
            if ( i == 0 ){
                listItem.addClass( 'current' );
            }
            $(ULId).append(listItem);
        }
    },