Как использовать «ближайшую» функцию jQuery с несколькими переключателями одних и тех же классов/id?

Пробовал несколько разных методов, не добившись успеха, поэтому я надеюсь, что кто-то может помочь, я уменьшил код ниже до самой основной (и нефункциональной формы), в основном то, что мне нужно, у меня будут кучи строк таблицы так же, как показано ниже, но я хочу, чтобы каждое действие флажка запускало переключатель ближайшего набора из <span> элементов.Как использовать «ближайшую» функцию jQuery с несколькими переключателями одних и тех же классов/id?

код ниже:

$(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>

Верхний код работает, если есть только одна строка, но мне нужно, чтобы обрабатывать несколько строк.

Флажок всегда будет назван statusArray[] и помечен как #change

Есть 3 пролетов, хотя каждая строка будет иметь только два в любое время, это будет span.enabled, span.disabled и span.pending

Есть способ использования jquery для активации toggle только в текущей строке таблицы? Мне нужно выяснить что-то, что достигнет этого.

Любая помощь очень ценится.

источник

2016-09-04 vrwd

ИД изменения для класса. если вы используете идентификатор, он будет обнаруживаться только в первой строке. –

Попробуйте это сделать #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>

источник

2016-09-04 13:45:46 kukkuz

Хорошо работает, именно то, чего я пытался достичь, спасибо :) – vrwd

<!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 ("тд"). Родитель ("тр"). Детей ("тд"). Детей ("span.disabled") .toggle(); $ (this) .parent ("td"). Parent ("tr"). Children ("td"). Children ("span.enabled"). Toggle(); $ (this) .parent ("td"). Parent ("tr"). Children ("td"). Children ("span.pending"). Toggle();

}); 

    }); 

}); 
</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 = "изменение" в класс = "изменение" также $ ("# ввод изменений") до $ ("input.change")

и добавить $ (это). parent ("td"). parent ("tr"). children ("td"). children to to to go to find to ближайший элемент из класса = "change"

источник

2016-09-04 13:46:53

Не удалось заставить этого работать, вы хотите снова взглянуть и отредактировать его? Два других ответа уже сработали для этого, но если вы хотите исправить этот код в рабочий формат, я могу поддержать вас за то, что вы нашли время ответить :) – vrwd

@vrwd этот рабочий скрипт https://jsfiddle.net/zyamomz5/ –

Вы не можете использовать дубликат 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>

источник

2016-09-04 14:01:56 BenG

Еще один хороший способ добиться того же, спасибо – vrwd

Как использовать «ближайшую» функцию jQuery с несколькими переключателями одних и тех же классов/id?

ответ

Смежные вопросы