All geek questions in one place

How to use the "nearest" jQuery function with multiple switches of the same classes / id?

Tried a few different methods, without success, so I hope someone can help, I dropped the code below so that it is the most basic (and non-functional), basically what I need, I will have heaps of table rows as well as shown below, but I want each checkbox action to trigger a switch on the closest set of items <span>.

Code below:

$(document).ready(function() {

  $("input#change").change(function() {
    $("span.disabled").toggle();
    $("span.enabled").toggle();
    $("span.pending").toggle();
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form action="page.php" method="post">

  <table>
    <!-- Row 1 -->
    <tr>
      <td>
        <span class="pending" style="display:none;">PENDING</span>
        <span class="disabled">DISABLED</span>
      </td>
      <td>
        <input type="checkbox" name="statusArray[]" id="change" value="1" />
      </td>
    </tr>
    <!-- Row 2 -->
    <tr>
      <td>
        <span class="pending" style="display:none;">PENDING</span>
        <span class="enabled">ENABLED</span>
      </td>
      <td>
        <input type="checkbox" name="statusArray[]" id="change" value="2" />
      </td>
    </tr>
  </table>
  
  </form>
Run code

The top code works if there is only one line, but I need it to process multiple lines.

The checkbox will always be named statusArray[]and marked as#change

There are 3 spans, although each row will only have two at each point in time, it will span.enabled, span.disabledandspan.pending

jquery toggle ? -, .

.

+4
3

#change , id .

closest('tr'), . . !

$(document).ready(function() {

  $("input.change").change(function() {
    $this = $(this).closest('tr');   
    
    $this.find("span.disabled").toggle();
    $this.find("span.enabled").toggle();
    $this.find("span.pending").toggle();
  });

});
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<body>
  <form action="page.php" method="post">
    <table>
      <!-- Row 1 -->
      <tr>
        <td>
          <span class="pending" style="display:none;">PENDING</span>
          <span class="disabled">DISABLED</span>
        </td>
        <td>
          <input type="checkbox" name="statusArray[]" class="change" value="1" />
        </td>
      </tr>
      <!-- Row 2 -->
      <tr>
        <td>
          <span class="pending" style="display:none;">PENDING</span>
          <span class="enabled">ENABLED</span>
        </td>
        <td>
          <input type="checkbox" name="statusArray[]" class="change" value="2" />
        </td>
      </tr>
    </table>

  </form>


</body>

</html>
+2

id, class [name^=statusArray]

, .

closest , find - toggle.

$(document).ready(function() {

  $('table').on('change', '[name^=statusArray]', function() {
    var row = $(this).closest('tr');
    row.find("span.disabled,span.enabled,span.pending").toggle();
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <!-- Row 1 -->
  <tr>
    <td>
      <span class="pending" style="display:none;">PENDING</span>
      <span class="disabled">DISABLED</span>
    </td>
    <td>
      <input type="checkbox" name="statusArray[]" class="change" value="1" />
    </td>
  </tr>
  <!-- Row 2 -->
  <tr>
    <td>
      <span class="pending" style="display:none;">PENDING</span>
      <span class="enabled">ENABLED</span>
    </td>
    <td>
      <input type="checkbox" name="statusArray[]" class="change" value="2" />
    </td>
  </tr>
</table>
+1
<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){



$("input.change").change(function(e){
      e.preventDefault();

$().parent( "" ) ( "TR" ) ( "" ) ( "span.disabled" ) ()....;         . $().parent( "" ) ( "" ) ( "" ) ( "span.enabled" ) ()...;         . $().parent( "" ) ( "" ) ( "" ) ( "span.pending" ) ();...

});

    });

});
</script>

</head>
<body>

<form action="page.php" method="post">

<table>
    <!-- Row 1 -->
    <tr>
        <td>
            <span class="pending" style="display:none;">PENDING</span>
            <span class="disabled">DISABLED</span>
        </td>
        <td>
            <input type="checkbox" name="statusArray[]" class="change" value="1" />
        </td>
    </tr>
    <!-- Row 2 -->
    <tr>
        <td>
            <span class="pending" style="display:none;">PENDING</span>
            <span class="enabled">ENABLED</span>
        </td>
        <td>
            <input type="checkbox" name="statusArray[]" class="change" value="2" />
        </td>
    </tr>
</table>

</form>


</body>
</html>

ID = "change" class= "change" $( "input # change" ) $( "input.change" )

$(this).parent( "td" ). parent ( "tr" ). children ( "td" ). children to to gogle, class= "change"

0
source

Source: https://habr.com/ru/post/1653588/

More articles:


All Articles