Question

我有一个tab的工作代码（bootstrap tabs），在这个例子中我只显示3个选项卡。后来他们正在动态生成。

所以问题是我想让它们可编辑。我正在使用输入字段来输入和保存数据。每个选项卡都有编辑并保存与类的链接。

我想要

当我点击编辑时，它应该从所选/活动标签上的输入字段中删除readonly属性。但是将readonly添加到其余选项卡中。（这样用户就无法更改名称）
接下来，当我点击保存时，它应该将数据保存为值。
如果第一个标签已经可编辑，然后我尝试使第三个标签的第二个可编辑，则相同。它应该保存第一个并使下一个可编辑。
将图标从保存更改为编辑和副virsa。

我知道要做很多工作。但我真的需要帮助。谢谢。

Jquery的

    $(document).on('click', '.db-edit-tab ', function () {
    $(this).parent('a').find('.input-editable').prop('readonly', '').focus().addClass('input-edit-mode');
        $(this).addClass("glyphicon-floppy-disk db-save-name").removeClass("glyphicon-edit db-edit-tab"); //New line Added
});


$(document).on('click', '.db-save-name', function (e) {
    $(this).parent('a').find('.input-editable').prop('readonly', 'true').removeClass('input-edit-mode');
    $(this).removeClass("glyphicon-floppy-disk db-save-name ").addClass("glyphicon-edit db-edit-tab "); //New line Added


});

Answer 1

所以最后我找到了解决方案。我只检查所有li元素并应用css并更改readonly属性。

<强> HTML

<div class="dash-board-text-container">
    <ul class="dashboard nav nav-tabs db-nav-tabs" id="tabs">
        <li class="active glyphicon"> <a class="border db-nav-tab-icons" data-toggle="tab" href="#dashboard-content">

                    <!-- <span class="glyphicon glyphicon-text-background gi-1x db-add-language" style="position: relative; padding: 7px;right: 35px; display: none" ></span> -->


                <label class="addon language_addon_name lang inputCustomMax">
                    <input type="text" class="input-editable" value="Dashboard" maxlength="30px;" readonly>                                 </label>
               <!-- <div class="content-editable-false" ContentEditable="false" max="30">Dashboard</div> -->
                <i class="language_addon_name_icon glyphicon  glyphicon-edit db-edit-tab"></i>
            </a>

            <div class="name-addon-additional-lang"></div>
            <div class="name-addon-form"></div>
        </li>
        <li class=" glyphicon"> <a class="border db-nav-tab-icons" data-toggle="tab" href="#overview-content">
                <!-- <span class="glyphicon glyphicon-text-background gi-1x db-add-language" style="position: relative; padding: 7px;right: 35px; display: none" ></span> -->
                <label class="addon language_addon_name lang inputCustomMax">
                    <input type="text" class="input-editable" value="Dashboard 2" maxlength="30px;" readonly>


                </label>
                <!-- <div class="content-editable-false" ContentEditable="false" max="30">Dashboard</div> -->
                <i class="language_addon_name_icon glyphicon  glyphicon-edit db-edit-tab"></i>
            </a>

            <div class="name-addon-additional-lang"></div>
            <div class="name-addon-form"></div>
        </li>
        <li class=" glyphicon"> <a class="border db-nav-tab-icons" data-toggle="tab" href="#dashboard-content3">

                    <!-- <span class="glyphicon glyphicon-text-background gi-1x db-add-language" style="position: relative; padding: 7px;right: 35px; display: none" ></span> -->


                <label class="addon language_addon_name lang inputCustomMax">
                    <input type="text" class="input-editable" value="Dashboard 3" maxlength="30px;" readonly>                                 </label>
               <!-- <div class="content-editable-false" ContentEditable="false" max="30">Dashboard</div> -->
                <i class="language_addon_name_icon glyphicon  glyphicon-edit db-edit-tab"></i>
            </a>

            <div class="name-addon-additional-lang"></div>
            <div class="name-addon-form"></div>
        </li>
    </ul>
</div>
<div class="tab-content">
    <div class="tab-pane fade in active" id="dashboard-content">content 1</div>
    <!-- dashboard-content -->
    <div id="overview-content" class="tab-pane fade in">overview-content nothing else</div>
    <!-- overview-content -->
    <div class="tab-pane fade in" id="dashboard-content3">content 3</div>
</div>
<!-- tab-content -->

<强> jquery的

$(document).on('click', '.db-edit-tab ', function () {
        editNames();
        $(this).parent('a').find('.input-editable').prop('readonly', '').focus().addClass('input-edit-mode');
        $(this).addClass("glyphicon-floppy-disk db-save-name").removeClass("glyphicon-edit db-edit-tab"); //New line Added

    });

    $(document).on('click', '.db-save-name', function (e) {
        $(this).parent('a').find('.input-editable').prop('readonly', 'true').removeClass('input-edit-mode');
        $(this).removeClass("glyphicon-floppy-disk db-save-name ").addClass("glyphicon-edit db-edit-tab "); //New line Added

    });
        function editNames(){

            $( "#tabs li" ).each(function() {
                var  activeClass =($('#tabs li').hasClass('active'));
                var  activeNoClass =($('#tabs li').not('active'));

                var  activeClassNew = ($(activeClass).find('.language_addon_name_icon'));
                var  activeNoClassNew = ($(activeNoClass).find('.language_addon_name_icon'));

                $(activeClassNew).addClass('glyphicon-floppy-disk db-save-name').removeClass('glyphicon-edit db-edit-tab');
                $(activeNoClassNew).removeClass('glyphicon-floppy-disk db-save-name').addClass('glyphicon-edit db-edit-tab');


                $(activeClass).find('.input-editable').prop('readonly','');
                $(activeNoClass).find('.input-editable').prop('readonly','false');

            });

        }

使多个标签的名称可编辑。使用编辑和保存按钮

1 个答案: