javascript - 实现标签!如何重命名使用 Jquery 动态生成的选项卡？

Question

我有一个小问题希望你能帮助我。我正在使用 materializecss 框架的称为“选项卡”(tabs)的元素，但我正在使用 javascript 配置它以允许用户执行某些操作，例如:1.添加新标签。2.编辑任何选项卡的名称(现有的或添加的)。

我将在下面显示我已有的代码:

$("#Tab1").dblclick(function () {
                var texto = $("#Tab1").text();
        $("#Tab1").remove();
        $("#inputTab1").attr("type", "text");
        $("#inputTab1").val(texto);
        $("#inputTab1").focus();
});

$('#inputTab1').on('keyup', function(e) {
    if(e.keyCode === 13) {
            
        var input1 = $(this).val();
        
        $("#inputTab1").before('<a class="active" id="Tab1" href="#test1">' + input1 +  '</a>');
        
        $("#inputTab1").val("");
        
        $("#inputTab1").attr("type", "hidden");
        
        
        $("#Tab1").dblclick(function () {
        
          var texto = $("#Tab1").text();
          $("#Tab1").remove();
          $("#inputTab1").attr("type", "text");
          $("#inputTab1").val(texto);
          $("#inputTab1").focus();
        });
    }
});


function addNew(){
    $(".pestanas").each(function(){
      $(this).removeClass('active');
  });
  $(".contenidos").each(function(){
      $(this).removeClass('active').css('display','none');
    
  })
  var id = Math.floor((Math.random() * 10000) + 1);
  var pesta = '<li class="tab col s3"><a class="pestanas active" id="Tab'+id+'" href="#test'+id+'">New Tab<input type="hidden" name="tab2" value="New Tab" /></a></li>';
  var conte = '<div id="test'+id+'" class="col s12 contenidos active">Text New Tab '+id+'</div>';
  $("#tabControl").before(pesta);
  $("#tabs").after(conte);
  $('ul.tabs').tabs();
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<div class="row">
    <div class="col s12" id="tabs">
      <ul class="tabs">
        <li class="tab col s3" id="first"><a class="pestanas active" id="Tab1" href="#test1">name</a><input style="text-align: center; color: pink;" type="hidden" name="tab1" id ="inputTab1" value="" placeholder="new name"/></li>
        <li class="tab col s3"><a id="Tab2" href="#test2">New Tab<input type="hidden" name="tab2" value="New Tab" /></a></li>
        <li class="tab col s3" id="tabControl"><a id="control" onClick="addNew()" href="javascript:void(0)">+</a></li>
      </ul>
    </div>
    <div id="test1" class="col s12">
      text first tab</div>
    <div id="test2" class="col s12">text second tab</div>
  </div>

前面的代码做了以下事情:1. 单击“+”按钮添加新选项卡。2. 允许在双击当前名称时编辑第一个选项卡的名称...

好吧，我想要的是，当用户添加新标签时，他也可以编辑新标签的名称，不仅是第一个标签，还有用户添加的所有标签...我已经尝试过这样做直到现在我还没有得到好的结果，因为它会与第一个选项卡发生冲突。我可以用什么方式做到这一点？您可以提供给我的任何脚本吗？ ... 这个想法是，也可以通过双击选项卡(例如:第一个选项卡)来编辑添加的每个新选项卡。如果你能帮我解决这个问题，我将不胜感激，这几天让我发疯了。

Answer 1

基本上，您需要提取逻辑来为新选项卡应用事件 KeyUp 和 dblCkick。

var applyDblEvent = function (identifier) {
        $("#Tab" + identifier).dblclick(function () {
            var $Tab = $("#Tab" + identifier);
            var texto = $Tab.text();
            $Tab.remove();
            var $inputTab = $("#inputTab" + identifier);
            $inputTab.attr("type", "text");
            $inputTab.val(texto);
            $inputTab.focus();
        });
    };

    var applyKeyUpEvent = function (identifier) {
        $('#inputTab' + identifier).on('keyup', function (e) {
            if (e.keyCode === 13) {
                var input = $(this).val();
                var $inputTab = $("#inputTab" + identifier);
                $inputTab.before('<a class="active" id="Tab' + identifier + '" href="#test' + identifier + '">' + input + '</a>');
                $inputTab.val("");
                $inputTab.attr("type", "hidden");

                applyDblEvent(identifier);
            }
        });
    };

    $(document).ready(function () {
        applyDblEvent(1);
        applyKeyUpEvent(1);
    });

    function addNew() {
        $(".pestanas").each(function () {
            $(this).removeClass('active');
        });
        $(".contenidos").each(function () {
            $(this).removeClass('active').css('display', 'none');
        });

        var id = Math.floor((Math.random() * 10000) + 1);
        var pesta = '<li class="tab col s3"><a class="pestanas active" id="Tab' + id + '" href="#test' + id + '">New Tab</a><input style="text-align: center; color: pink;" type="hidden" name="tab' + id + '" id="inputTab' + id + '" value="New Tab" /></li>';
        var conte = '<div id="test' + id + '" class="col s12 contenidos active">Text New Tab ' + id + '</div>';

        $("#tabControl").before(pesta);
        $("#tabs").after(conte);
        $('ul.tabs').tabs();

        setTimeout(function() {
            $('ul.tabs').tabs('select_tab', 'test' + id);
        }, 100);

        applyDblEvent(id);
        applyKeyUpEvent(id);
    }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<div class="row">
    <div class="col s12" id="tabs">
      <ul class="tabs">
        <li class="tab col s3" id="first"><a class="pestanas active" id="Tab1" href="#test1">name</a><input style="text-align: center; color: pink;" type="hidden" name="tab1" id ="inputTab1" value="" placeholder="new name"/></li>
        <li class="tab col s3"><a id="Tab2" href="#test2">New Tab<input type="hidden" name="tab2" value="New Tab" /></a></li>
        <li class="tab col s3" id="tabControl"><a id="control" onClick="addNew()" href="javascript:void(0)">+</a></li>
      </ul>
    </div>
    <div id="test1" class="col s12">
      text first tab</div>
    <div id="test2" class="col s12">text second tab</div>
  </div>

希望这对您有所帮助!