Jquery: click does not use parameters outside function

Question

I'm using the following script to hide a checkbox when it is checked. After that, it should display the corresponding select box. If more info is needed, check my other question on the first steps.

The script does hide the checkbox, however, it does not show the correct select box. This is because it has the wrong parameters inside the click function. It always grabs the last i and the last 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();
                }
            })  
        }
    }
})

Who can tell me how to give the part inside the .click the right corresponding parameters?

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>

I don't think that's possible since it's al created in laravel using the laravel forms. Also, the checkbox list is very long. However, I tried it for as far as it is possible! — Lex de Willigen
– Lex de Willigen, Commented Nov 1, 2017 at 20:29

zfrisch · Accepted Answer · 2017-11-15 15:55:37Z

The big issue with your code is that your variables c and i were declared to a higher scope than need be. Instead of using var or nothing, use the let declarative. They weren't scoped to their executing blocks and when they were used they would pull the previous information stored, causing the same box to appear over and over on click - scoping them removes this problem.

Instead of using in iteration you can use of since you're just pulling out the number stored within the array.

Another issue was that you were using c < 6 which may be fine if your user has 6 items associated with the same id number, but in order to make sure that the number is always correct we simply search for the number of items associated with that id ahead of time and count them. This allows us to say c < listLength and thus makes it more dynamic.

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>

Perfect answer! Could not help me more. Your solution is very clear, and it also teached me a lot, many thanks for that! (one detail just to know, I used 6 because the week will always have 7 days, still, many thanks for the clarification!)

Collectives™ on Stack Overflow

Jquery: click does not use parameters outside function

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related