Question

我现在已经有一段时间没有清楚地解决这个问题了。 https://jsfiddle.net/brendanjackson/4ajs7czo/3/

这是场景。我有两个函数将一组数据发送到我页面的不同区域。因此，如果您在主字段中输入一些文字，请点击提交，然后将该文字发送到＆＃39; set1＆＃39;并创建一个按钮并选择菜单。

<body>

  <div class="container-fluid">



    <div class="start">  
        <form class="form-inline">

          <h1><strong>Start</strong></h1>
    <div class="row">        
            <div class="col-xs-4">
              Task:<input type="text" class= "task form-control" id="input_text" > 
            </div>
      </div>
  <!--***********************************************************************************************************-->
        <div class="row">

          <div class="col-md-4">
            Send to:
            <select class="set1_menu">
              <option value="set1table0">set1table0</option>
            </select>
          </div>

          <div class="col-md-4">
          <input type="button" id='submit_button' class="btn btn-primary" value="Submit!" />
          </div>

        </div>

        </form>
    </div>
  <!--***********************************************************************************************************-->


      <div>

       <h1 class="label label-default">Set1</h1>

        <div class="set1 row">

          <div class="set1_table0 column ">
            <h3>set1table0</h3>
            <ul class="set1_text0"></ul>
          </div>


    </div>

<!--**********************************************************************************************************--> 
      <div>

        <h1 class="label label-default set2">Set2</h1>

      </div>
<!--*********************************************************************************************************-->
    <div>


        <div class="set2_table0 column">
          <h3>set2table0</h3>
          <ul class="set2_text0"></ul>
        </div>


    </div>


    </div>


  $('#submit_button').on("click",function() {    

    /*==========================================
                      variabes
    ===========================================*/
      task = $(".task").val();
        set1_menu = $(".set1_menu option:selected");
      set1_index = set1_menu.index() //switch arg

      set2_menu = '<select class="set2_menu"> <option value="set2_table0">set2table0</option> </select>';
      set2_button = '<input type="button" class="set2_button" data-set1_data="'+set1_index+'"  value="set2_button" />'

$('.set1_table0').append("<li>" + task + " "  + set2_menu + " " + set2_button + "</li>" );


  })

  $("div.set1.row").on("click", "input.set2_button", function(){
      /*==========================================
                        variabes
      ===========================================*/

      var set2_index = $(this).closest('li').find('select.set2_menu option:selected').index();
      var set1_data = $(this).data('set1_data');
      var set2_data = $(this).data('set2_data');

      /*=========================================
                        TEST
      =========================================*/
      console.log( "IT WORKS" + " " + set2_index );

   switch(set2_index){
        case 0:
        $('.set2_table0').append("<li>" + task + " "  + " (from Table " +set1_data+ "  )" + " " /*+ datetimepicker + " "*/  + "</li>" );
        break;

    }

  });

问题：

如果用户跟踪发送到set1的数据并将其发送到set2一切正常并且jedi获胜！

但是，如果用户决定返回到开头，输入新信息并将其发送到set1，则前一个变量当然已被覆盖，无法再发送到set2。它现在将发送最新变量的信息。

有人向我建议添加var i=0++, task，然后在我的第一个函数上添加i++，这样就可以让每个变量都很容易找到#toy task0，task1，task（n）以及把它变成一个数组。这两种解决方案我都不了解如何实施，也许是因为缺乏如何表达我的问题来研究它？

问题

如何干净地保存提交的每组数据，以便每当用户决定他们准备就绪时，就可以将它从set1发送到set2。

Answer 1

您应该只使用var关键字在开头声明一次变量。您似乎不会在开头使用var关键字，但稍后会使用它。这将重新声明一个名称相同但范围不同的变量。

var task = "";
var selection = $(".something").val();
...

// Later on, re-use the variables without re-declaring:

task = "Something else.";
selection = $(".something-else").val();

在事件中，当且仅当您使用var关键字时，变量才会限制在其范围内。您的活动应更改为：

$('#submit_button').on("click",function() {    
    var task = $(".task").val();
    var set1_menu = $(".set1_menu option:selected");
    var set1_index = set1_menu.index() //switch arg

    var set2_menu = '<select class="set2_menu"> <option value="set2_table0">set2table0</option> </select>';
    var set2_button = '<input type="button" class="set2_button" data-set1_data="' + set1_index + '"  value="set2_button" />'
    $('.set1_table0').append("<li>" + task + " "  + set2_menu + " " + set2_button + "</li>" );
});

如果您希望变量保留其初始值并在其他地方访问这些值，请将变量存储在隐藏元素中，如下所示：

<input type="hidden" id="task" value="" />
...

$('#submit_button').on("click",function() {    
    var task = $(".task").val();
    ...
    $(".task").val(anotherValue);
});

如何不覆盖你的变量

1 个答案: