Jquery：click不使用函数外的参数

时间：2017-11-01 19:58:51

标签： jquery onclick parameter-passing

我正在使用以下脚本在选中时隐藏复选框。之后，它应该显示相应的选择框。如果需要更多信息，请在第一步中check my other question。

脚本会隐藏复选框，但是，它不会显示正确的选择框。这是因为它在click函数中有错误的参数。它总是抓住最后一个和最后一个c。

var userList = <?php echo json_encode($userIdList); ?>;

$(document).ready(function() {
    for (var i in userList) {
        for (c = 0; c <= 6; c++) { 
            $("#" + userList[i] + "_" + c).click(function(e) {
                if ($(this).prop("checked")) {
                    $(this).hide();
                    $("#" + userList[i] + "_select_" + c).show();
                }
            })  
        }
    }
})

谁能告诉我如何在.click正确的相应参数中提供该部分？

var userList = [1,2,4];

    $(document).ready(function() {
        for (var i in userList) {
            for (c = 0; c <= 6; c++) { 
                $("#" + userList[i] + "_" + c).click(function(e) {
                    if ($(this).prop("checked")) {
                        $(this).hide();
                        $("#" + userList[i] + "_select_" + c).show();
                    }
                })  
            }
        }
    })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width: 100%;"><tbody><tr><td>Week</td><td>Werknemer</td><td>Maandag</td><td>Dinsdag</td><td>Woensdag</td><td>Donderdag</td><td>Vrijdag</td><td>Zaterdag</td><td>Zondag</td></tr> <tr><td>DEFAULT</td><td>Lex</td> <td></td> <td><input id="1_1" name="1_[]" type="checkbox" value="1" style="display: none;"> <select id="1_select_1" name="1_select_[]" style="display: none;"><option value="L">Large</option><option value="S">Small</option></select></td> <td></td> <td><input id="1_3" name="1_[]" type="checkbox" value="3"> <select id="1_select_3" name="1_select_[]" style="display: none;"><option value="L">Large</option><option value="S">Small</option></select></td> <td><input id="1_4" name="1_[]" type="checkbox" value="4"> <select id="1_select_4" name="1_select_[]" style="display: none;"><option value="L">Large</option><option value="S">Small</option></select></td> <td><input id="1_5" name="1_[]" type="checkbox" value="5"> <select id="1_select_5" name="1_select_[]" style="display: none;"><option value="L">Large</option><option value="S">Small</option></select></td> <td><input id="1_6" name="1_[]" type="checkbox" value="6"> <select id="1_select_6" name="1_select_[]" style="display: none;"><option value="L">Large</option><option value="S">Small</option></select></td> <td></td></tr> <tr><td>DEFAULT</td><td>Virgil</td> <td><input id="2_0" name="2_[]" type="checkbox" value="0"> <select id="2_select_0" name="2_select_[]" style="display: none;"><option value="L">Large</option><option value="S">Small</option></select></td> <td><input id="2_1" name="2_[]" type="checkbox" value="1"> <select id="2_select_1" name="2_select_[]" style="display: none;"><option value="L">Large</option><option value="S">Small</option></select></td> <td><input id="2_2" name="2_[]" type="checkbox" value="2" style="display: none;"> <select id="2_select_2" name="2_select_[]" style="display: none;"><option value="L">Large</option><option value="S">Small</option></select></td> <td><input id="2_3" name="2_[]" type="checkbox" value="3" style="display: none;"> <select id="2_select_3" name="2_select_[]" style="display: none;"><option value="L">Large</option><option value="S">Small</option></select></td> <td><input id="2_4" name="2_[]" type="checkbox" value="4"> <select id="2_select_4" name="2_select_[]" style="display: none;"><option value="L">Large</option><option value="S">Small</option></select></td> <td><input id="2_5" name="2_[]" type="checkbox" value="5"> <select id="2_select_5" name="2_select_[]" style="display: none;"><option value="L">Large</option><option value="S">Small</option></select></td> <td></td> <td></td></tr> <tr><td>DEFAULT</td><td>Franco</td> <td></td> <td></td> <td><input id="4_2" name="4_[]" type="checkbox" value="2" style="display: none;"> <select id="4_select_2" name="4_select_[]" style="display: none;"><option value="L">Large</option><option value="S">Small</option></select></td> <td><input id="4_3" name="4_[]" type="checkbox" value="3" style="display: none;"> <select id="4_select_3" name="4_select_[]" style="display: none;"><option value="L">Large</option><option value="S">Small</option></select></td> <td><input id="4_4" name="4_[]" type="checkbox" value="4"> <select id="4_select_4" name="4_select_[]" style="display: none;"><option value="L">Large</option><option value="S">Small</option></select></td> <td><input id="4_5" name="4_[]" type="checkbox" value="5"> <select id="4_select_5" name="4_select_[]" style="display: none;"><option value="L">Large</option><option value="S">Small</option></select></td> <td><input id="4_6" name="4_[]" type="checkbox" value="6"> <select id="4_select_6" name="4_select_[]" style="display: none;"><option value="L">Large</option><option value="S">Small</option></select></td> <td></td></tr></tbody></table>

1 个答案:

答案 0 :(得分：1)

您的代码存在的最大问题是您的变量c和i被声明的范围超出了需要。不使用var或任何内容，而是使用let声明。它们没有作用于它们的执行块，当它们被使用时，它们会将先前存储的信息拉出来，导致同一个框在点击时反复出现 - 确定它们可以消除这个问题。

您可以使用in而不是使用of次迭代，因为您只是提取存储在数组中的数字。

另一个问题是您使用c < 6如果您的用户有6个与相同ID号关联的项目可能没问题，但为了确保该号码始终正确我们只需搜索该号码提前与该ID关联的项目并计算它们。这允许我们说c < listLength，从而使其更具动态性。

var userList = [1, 2, 4];

$(document).ready(function() {

  for (let i of userList) {

    let listLength = document.querySelectorAll("[id^='" + i + "']").length;

    for (let c = 0; c < listLength; c++) {

      $("#" + i + "_" + c).click(function(e) {
        if ($(this).prop("checked")) {
          $(this).hide();
          console.log(i, c);
          $("#" + i + "_select_" + c).show();
        }
      })
    }
  }
})


var userList = [1, 2, 4];

$(document).ready(function() {

  for (let i of userList) {
 
    let listLength = document.querySelectorAll("[id^='" + i + "']").length;

    for (let c = 0; c < listLength; c++) {

      $("#" + i + "_" + c).click(function(e) {
        if ($(this).prop("checked")) {
          $(this).hide();
          console.log(i, c);
          $("#" + i + "_select_" + c).show();
        }
      })
    }
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width: 100%;">
  <tbody>
    <tr>
      <td>Week</td>
      <td>Werknemer</td>
      <td>Maandag</td>
      <td>Dinsdag</td>
      <td>Woensdag</td>
      <td>Donderdag</td>
      <td>Vrijdag</td>
      <td>Zaterdag</td>
      <td>Zondag</td>
    </tr>
    <tr>
      <td>DEFAULT</td>
      <td>Lex</td>
      <td></td>
      <td><input id="1_1" name="1_[]" type="checkbox" value="1" style="display: none;"> <select id="1_select_1" name="1_select_[]" style="display: none;"><option value="L">Large</option><option value="S">Small</option></select></td>
      <td></td>
      <td><input id="1_3" name="1_[]" type="checkbox" value="3"> <select id="1_select_3" name="1_select_[]" style="display: none;"><option value="L">Large</option><option value="S">Small</option></select></td>
      <td><input id="1_4" name="1_[]" type="checkbox" value="4"> <select id="1_select_4" name="1_select_[]" style="display: none;"><option value="L">Large</option><option value="S">Small</option></select></td>
      <td><input id="1_5" name="1_[]" type="checkbox" value="5"> <select id="1_select_5" name="1_select_[]" style="display: none;"><option value="L">Large</option><option value="S">Small</option></select></td>
      <td><input id="1_6" name="1_[]" type="checkbox" value="6"> <select id="1_select_6" name="1_select_[]" style="display: none;"><option value="L">Large</option><option value="S">Small</option></select></td>
      <td></td>
    </tr>
    <tr>
      <td>DEFAULT</td>
      <td>Virgil</td>
      <td><input id="2_0" name="2_[]" type="checkbox" value="0"> <select id="2_select_0" name="2_select_[]" style="display: none;"><option value="L">Large</option><option value="S">Small</option></select></td>
      <td><input id="2_1" name="2_[]" type="checkbox" value="1"> <select id="2_select_1" name="2_select_[]" style="display: none;"><option value="L">Large</option><option value="S">Small</option></select></td>
      <td><input id="2_2" name="2_[]" type="checkbox" value="2" style="display: none;"> <select id="2_select_2" name="2_select_[]" style="display: none;"><option value="L">Large</option><option value="S">Small</option></select></td>
      <td><input id="2_3" name="2_[]" type="checkbox" value="3" style="display: none;"> <select id="2_select_3" name="2_select_[]" style="display: none;"><option value="L">Large</option><option value="S">Small</option></select></td>
      <td><input id="2_4" name="2_[]" type="checkbox" value="4"> <select id="2_select_4" name="2_select_[]" style="display: none;"><option value="L">Large</option><option value="S">Small</option></select></td>
      <td><input id="2_5" name="2_[]" type="checkbox" value="5"> <select id="2_select_5" name="2_select_[]" style="display: none;"><option value="L">Large</option><option value="S">Small</option></select></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>DEFAULT</td>
      <td>Franco</td>
      <td></td>
      <td></td>
      <td><input id="4_2" name="4_[]" type="checkbox" value="2" style="display: none;"> <select id="4_select_2" name="4_select_[]" style="display: none;"><option value="L">Large</option><option value="S">Small</option></select></td>
      <td><input id="4_3" name="4_[]" type="checkbox" value="3" style="display: none;"> <select id="4_select_3" name="4_select_[]" style="display: none;"><option value="L">Large</option><option value="S">Small</option></select></td>
      <td><input id="4_4" name="4_[]" type="checkbox" value="4"> <select id="4_select_4" name="4_select_[]" style="display: none;"><option value="L">Large</option><option value="S">Small</option></select></td>
      <td><input id="4_5" name="4_[]" type="checkbox" value="5"> <select id="4_select_5" name="4_select_[]" style="display: none;"><option value="L">Large</option><option value="S">Small</option></select></td>
      <td><input id="4_6" name="4_[]" type="checkbox" value="6"> <select id="4_select_6" name="4_select_[]" style="display: none;"><option value="L">Large</option><option value="S">Small</option></select></td>
      <td></td>
    </tr>
  </tbody>
</table>

相关问题
最新问题