如何设置电流<li> JQuery 中的选项卡

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>数据来自我创建的数据库。

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 的编写方式时，它几乎是正确的，只是它没有将Multiple Choice设置为当前<li>或选项卡。

检查<li>时 Google Chrome 检查器中的输出：

<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

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

就像在，

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

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

谢谢你。

Answer 1

就像您说的那样，您还需要专门添加不在主代码示例中的“当前”类。

你说你试过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);
        }
    },

Answer 2

试试 .addClass('tab-link'); 然后 .addClass('current'); 这应该有效。 或者 .addClass('tab-link').addClass('current');