Как показать / скрыть и переключать div в цикле foreach, используя Jquery и Stack Overflow
Если у вас есть проблемы с show / hide или переключателем, то это происходит с циклами php foreach.
Мой PHP выглядит так:
<?php
$keys = $personArray;
foreach($keys as $key){
$key = get_field_object($key);
$key_NAME = $key['name'];
$key_NAME2 = $key['name2'];
$key_TYPE = $key['type'];echo '<div style="display:block;margin-botton:4px;">';
echo '<span id="kname" class="hide">' . $key_NAME . '</span><span id="kname2" class="hide"' . $key_NAME2 . '</span>';
echo ' | ';
echo '<span id="ktype" class="hide">' . $key_TYPE . '</span>';
echo '</div>';
}//I will get;
/*
JamesJack | Artist
SamMike | Singer
CurtTrisha | Dancer
*/
?>
Но мне нужно, чтобы jQuery с флажками показывал / скрывал key_TYPE и переключался между key_NAME и key_NAME2
Как я могу сделать это правильно? Мой текущий код влияет только на первую строку результатов.
Вот остальная часть кода:
<style>
.hide{display:none;}
</style>
<script>
jQuery(document).ready(function($){
$('input[type="checkbox"]').click(function(){
if($(this).attr("value")=="changename"){
$("#kname").toggle();
}else{
$("#kname2").toggle();
}
if($(this).attr("value")=="hidetype"){
$("#ktype").toggle();
}
});
});
</script>
<html>
<label><input type="checkbox" name="vauChange" value="changename"> Toggle name</label>
<label><input type="checkbox" name="vauChange" value="hidetitle"> Hide Title</label>
</html>
Мой код не работает правильно.
Решение
Мне нравится использовать атрибуты данных для легкого доступа в JQuery
<?php
$keys = $personArray;
foreach($keys as $key){
$key = get_field_object($key);
$key_NAME = $key['name'];
$key_NAME2 = $key['name2'];
$key_TYPE = $key['type'];
echo '<div style="display:block;margin-botton:4px;">';
echo '<span class="hide change-name" data-name1="'.$key_NAME.'" data-name2="'.$key_NAME2.'">'.$key_NAME.'</span>';
echo ' | ';
echo '<span class="hide toggle-title">'.$key_TYPE.'</span>';
echo '</div>';
}
?>
<html>
<label><input type="checkbox" name="vauChange" value="changename" id="toggle-name-box"> Toggle name</label>
<label><input type="checkbox" name="vauChange" value="hidetitle" id="toggle-title-box"> Hide Title</label>
</html>
<script>
$('#toggle-name-box').click(function() {
$('.change-name').each(function() {
cur = $(this).text();
$(this).text(cur == $(this).data('name1') ? $(this).data('name2') : $(this).data('name1'));
});
});
$('#toggle-title-box').click(function() {
$('.toggle-title').each(function() {
$(this).toggleClass('hide');
});
});
</script>
И jsfiddle https://jsfiddle.net/f934qL1d/5/
Другие решения
Вы добавляете один и тот же идентификатор для всех элементов.
Прежде всего используйте класс вместо id для ваших элементов
echo '<div style="display:block;margin-botton:4px;">';
echo '<span class="kname hide">' . $key_NAME . '</span><span class="kname2 hide"' . $key_NAME2 . '</span>';
echo ' | ';
echo '<span class="ktype hide">' . $key_TYPE . '</span>';
echo '</div>';
В jquery используйте DOM для нацеливания элементов относительно элемента, который инициирует событие.
Так что jquery будет что-то вроде
jQuery(document).ready(function($){
$('input[type="checkbox"]').click(function(){
if($(this).attr("value")=="changename"){
$(this).closest('span.kname').toggle();
}else{
$(this).closest('div').find('span.kname2').toggle();
}
if($(this).attr("value")=="hidetitle"){
// same for ktitle since I can't see it in your html
}
});
});