使用 Jquery 和 PHP 在 foreach 循环中切换显示/隐藏 div答案

【问题标题】：Toggle show/hide of divs in a foreach loop using Jquery and PHP使用 Jquery 和 PHP 在 foreach 循环中切换显示/隐藏 div
【发布时间】：2016-03-18 16:23:51
【问题描述】：

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>

我的代码运行不正常。

【问题讨论】：

id="kname" - ALL 的元素具有相同的 ID，这是非法的。 DOM id 在整个文档中必须是唯一的。因为它们必须是唯一的，getElementById 只会返回它找到的第一个匹配元素，因为在同一个文档的其他地方不可能有任何重复的 id。
那么我该怎么做才能使每个输出都独一无二？如果我点击 chkbox，所有元素都会像它应该隐藏的那样隐藏吗？

标签： php jquery foreach toggle show-hide

【解决方案1】：

我喜欢在 jquery 中使用 data- 属性以便于访问

<?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/

【讨论】：

感谢@DaveK。您在 jsfiddle 中提供的示例似乎存在问题。在您的示例中，一个项目的“data-name1”与第二个项目不同，它在第一个项目上有 data-name1="keyname1" 和 data-name1="keyname2" 第二个它们应该是相同的，对吗？该列表将打印为：code /* James - Artist, James - Singer, James - Dancer */ 我想将所有 James 更改为 Jack
不，它们需要不同。我将两个替代名称存储在数据属性中以在它们之间切换。基本上，它会检查 span 中的当前文本是否为 name1，如果是，则将其更改为 name2，如果不是，则将其更改为 name1。我已经更新了 jsfiddle 以反映您的输出示例。

【解决方案2】：

您在所有元素上添加相同的 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
    }

});

});

【讨论】：

但这是否适用于“foreach”语句。请记住，只有一条回显线隐藏，其他即使它们具有相同的 id 或类名也不会隐藏。我的意思是“ktype”和“hidetype”作为值。我已经更新了，谢谢。