Question

我的问题：

我正在使用jQuery从选择框中捕获数据。有没有办法简化jQuery代码而不是多次重复它？

我想要实现的目标：

我从两个选择框中捕获日期和名称，以及最终输出显示位置的ID。我将这些值传递给函数myfunction。此函数将调用php文件以连接到DB并返回特定值并将其显示在文本框中。

function refreshText() {
  // Row 1
  var name1 = $("#name1").val();
  var date1 = $("#date1").val();
  var textbox = $("#1").attr('id');
  myFunction(date1, name1, textbox)

  var name1 = $("#name1").val();
  var date2 = $("#date2").val();
  var textbox2 = $("#2").attr('id');
  myFunction(date2, name1, textbox2)

  var name1 = $("#name1").val();
  var date3 = $("#date3").val();
  var textbox3 = $("#3").attr('id');
  myFunction(date3, name1, textbox3)

  var name1 = $("#name1").val();
  var date4 = $("#date4").val();
  var textbox4 = $("#4").attr('id');
  myFunction(date4, name1, textbox4)

  var name1 = $("#name1").val();
  var date5 = $("#date5").val();
  var textbox5 = $("#5").attr('id');
  myFunction(date5, name1, textbox5)

  $(document).ready(function() {
    $("#date1, #date2, #name1, #name2, #name3, #date3, #date4, #date5").change(function() {
      refreshText();
    });
  });

  //Row 2
  var name2 = $("#name2").val();
  var date1 = $("#date1").val();
  var textbox6 = $("#6").attr('id');
  myFunction(date1, name2, textbox6)

  var name2 = $("#name2").val();
  var date2 = $("#date2").val();
  var textbox7 = $("#7").attr('id');
  myFunction(date2, name2, textbox7)

  var name2 = $("#name2").val();
  var date3 = $("#date3").val();
  var textbox8 = $("#8").attr('id');
  myFunction(date3, name2, textbox8)

  var name2 = $("#name2").val();
  var date4 = $("#date4").val();
  var textbox9 = $("#9").attr('id');
  myFunction(date4, name2, textbox9)

  var name2 = $("#name2").val();
  var date5 = $("#date5").val();
  var textbox10 = $("#10").attr('id');
  myFunction(date5, name2, textbox10)

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
  <tr>
    <td></td>
    <td><select id="date1"><option value="Select">Select</option></select></td>
    <td><select id="date2"><option value="Select">Select</option></select></td>
    <td><select id="date3"><option value="Select">Select</option></select></td>
    <td><select id="date4"><option value="Select">Select</option></select></td>
    <td><select id="date5"><option value="Select">Select</option></select></td>

  </tr>
  <tr>
    <td><select id="name1" class="allNames"><option value="Select">Select</option><option value="alex">alex</option><option value="daniel">daniel</option><option value="Joe">Joe</option>
    	</select></td>
    <td><input type="text" id="1" readonly="readonly"></td>
    <td><input type="text" id="2" readonly="readonly"></td>
    <td><input type="text" id="3" readonly="readonly"></td>
    <td><input type="text" id="4" readonly="readonly"></td>
    <td><input type="text" id="5" readonly="readonly"></td>
  </tr>
  <tr>
    <td><select id="name2" class="allNames"><option value="Select">Select</option><option value="Joe">Joe</option><option value="alex">alex</option><option value="daniel">daniel</option>
    	</select></td>
    <td><input type="text" id="6" readonly="readonly"></td>
    <td><input type="text" id="7" readonly="readonly"></td>
    <td><input type="text" id="8" readonly="readonly"></td>
    <td><input type="text" id="9" readonly="readonly"></td>
    <td><input type="text" id="10" readonly="readonly"></td>
  </tr>
</table>

Answer 1

这个怎么样

创建一个名为updateData

的函数

function updateData(nameInput, dateInput, tbInput)
{ 
    var name = $(nameInput).val();
    var date = $(dateInput).val();
    var textbox = $(tbInput).attr('id');

    myFunction(date,name,textbox) ;
}

然后在你的refreshText中称之为

function refreshText(){
   updateData("#name1","#date1","#1")
   updateData("#name1","#date2","#2")
   ....
}

顺便说一句，这条线看起来有点奇怪

 var textbox = $("#1").attr('id');

因为变量textbox将被分配＆＃34; 1＆＃34;因为您正在使用ID查找控件以获取ID

Answer 2

检查一下。我所做的是我只提供了下拉属性row或col（如果他们引用列而不是col，则row）。现在，当用户根据下拉列表（名称或日期）选择任何此下拉列表获取require的值并调用该函数。（如果你看到这个功能你会更好理解）（我没有为某些人调用函数，因为更改下拉值不会改变它们的值）

＆＃13;

var row=2,col=5;
$("#date1, #date2, #name1, #name2, #name3, #date3, #date4, #date5").change(function () {
    refreshText(this);
});

function myFunction(a,b,c){console.log(a+' '+b+' '+c);};
function refreshText(e){
          if($(e).attr('col')){
              var date=$(e).val();
              for(i = 1 ; i <= row ; i++){
                  var name=$("#name"+i).val();
                  var textboxId='#'+ +$(e).attr('col') * + $("#name"+i).attr('row');
                  var textbox=$(textbox1Id).val();
                  myFunction(date, name, textbox)
              }
          }
          else{
              var name=$(e).val();
              for(i = 1 ; i <= col ; i++){
                  var date = $('#date'+i).val();
                  var textboxId = '#'+ +$(e).attr('row') * + $("#date"+i).attr('col');
                  var textbox=$(textboxId).val();
                  myFunction(date, name, textbox);
              }
          
          }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<tr>
    <td></td>
    <td><select id="date1" col="1"><option value="Select">Select</option></select></td>
    <td><select id="date2" col="2"><option value="Select">Select</option></select></td>
    <td><select id="date3" col="3"><option value="Select">Select</option></select></td>
    <td><select id="date4" col="4"><option value="Select">Select</option></select></td>
    <td><select id="date5" col="5"><option value="Select">Select</option></select></td>

</tr>
<tr>
    <td><select id="name1" class="allNames" row="1"><option value="Select">Select</option><option value="alex">alex</option><option value="daniel">daniel</option><option value="Joe">Joe</option>
    </select></td>
    <td><input type="text" id="1" col="1" row="1" readonly="readonly" ></td>
    <td><input type="text" id="2" col="2" row="1" readonly="readonly" ></td>
    <td><input type="text" id="3" col="3" row="1" readonly="readonly" ></td>
    <td><input type="text" id="4" col="4" row="1" readonly="readonly" ></td>
    <td><input type="text" id="5" col="5" row="1" readonly="readonly" ></td>
</tr>
<tr>
    <td><select id="name2" class="allNames" row="2"><option value="Select">Select</option><option value="Joe">Joe</option><option value="alex">alex</option><option value="daniel">daniel</option>
    </select></td>
    <td><input type="text" id="6" col="1" row="2" readonly="readonly" value="10"></td>
    <td><input type="text" id="7" col="2" row="2" readonly="readonly" ></td>
    <td><input type="text" id="8" col="3" row="2" readonly="readonly" ></td>
    <td><input type="text" id="9" col="4" row="2" readonly="readonly" ></td>
    <td><input type="text" id="10" col="5" row="2" readonly="readonly" ></td>
</tr>
</table>

＆＃13;

Answer 3

选择仅有一个选项的日期框不会触发更改事件。

要遍历姓名和日期，您可以尝试以下功能（假设您有五个日期和10个输入文本框，如代码段所示


function regreshText(){
    var var_all_names = $('#myTable td').children('select.allNames');
    for(i = 0; i < var_all_names.length; i++){
        for(j = 1; j <= 5; j++){
            if(var_all_names[i].id == 'name1'){
                myFunction($('#date'+j), var_all_names[i], $('#textbox'+j));
            }
            if(var_all_names[i].id == 'name2'){
                myFunction($('#date'+j), var_all_names[i], $('#textbox'+ parseInt(j+5)));
            }
        }
    }
}

Answer 4

检查以下解决方案

＆＃13;

$(document).ready(function() {
  $("#date1, #date2, #name1, #name2, #name3, #date3, #date4, #date5").change(function() {
    console.clear();
    refreshText();
  });
});

function refreshText() {
  $("#myTable").find("input[type=text]").each(function(i, element)    {
    var nameId = "name1";
    var dateId = "date" + (i + 1);
    if (i > 4) {
      nameId = "name2";
      dateId = "date" + (i - 4)
    }

    var nameVal = $("#" + nameId).val();
    var dateVal = $("#" + dateId).val()
    var textId = $("#" + (i+1)).attr('id');
    myFunction(nameVal, dateVal, textId)

   //for test
    $(element).val($("#" + dateId).val() + " / " +
      $("#" + nameId).val())
  });
}

function myFunction(nameVal, dateVal,textId) {
  console.log("name value: " + nameVal + " | date value: " + dateVal + " | text id: " + textId);
}

＆＃13;

<html>

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <table id="myTable">
    <tr>
      <td></td>
      <td><select id="date1"><option value="Select">Select</option>
      <option value="1">1</option>
      </select></td>
      <td><select id="date2"><option value="Select">Select</option>
      <option value="2">2</option></select></td>
      <td><select id="date3"><option value="Select">Select</option>
      <option value="3">3</option></select></td>
      <td><select id="date4"><option value="Select">Select</option>
      <option value="4">4</option></select></td>
      <td><select id="date5"><option value="Select">Select</option>
      <option value="5">5</option></select></td>

    </tr>
    <tr>
      <td>
        <select id="name1" class="allNames">
                    <option value="Select">Select</option>
                    <option value="alex">alex</option>
                    <option value="daniel">daniel</option>
                    <option value="Joe">Joe</option>
                </select>
      </td>
      <td><input type="text" id="1" readonly="readonly"></td>
      <td><input type="text" id="2" readonly="readonly"></td>
      <td><input type="text" id="3" readonly="readonly"></td>
      <td><input type="text" id="4" readonly="readonly"></td>
      <td><input type="text" id="5" readonly="readonly"></td>
    </tr>
    <tr>
      <td>
        <select id="name2" class="allNames">
                    <option value="Select">Select</option>
                    <option value="Joe">Joe</option>
                    <option value="alex">alex</option>
                    <option value="daniel">daniel</option>
                </select>
      </td>
      <td><input type="text" id="6" readonly="readonly"></td>
      <td><input type="text" id="7" readonly="readonly"></td>
      <td><input type="text" id="8" readonly="readonly"></td>
      <td><input type="text" id="9" readonly="readonly"></td>
      <td><input type="text" id="10" readonly="readonly"></td>
    </tr>
  </table>
</body>

</html>

＆＃13;

如何简化此代码而不是多次重复？

4 个答案: