使用 Jquery 和 PHP 在 foreach 循环中切换 show/hide 个 div

Question

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 和复选框 show/hide 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>

我的代码无法正常工作。

Answer 1

您正在为所有元素添加相同的 ID。

首先对你的元素使用 class 而不是 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
    }

});

});

Answer 2

我喜欢在 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/

使用 Jquery 和 PHP 在 foreach 循环中切换 show/hide 个 div

Toggle show/hide of divs in a foreach loop using Jquery and PHP

php

foreach

jquery

toggle

show-hide