Fatal编程技术网
  • php/
  • 使用Jquery和PHP切换foreach循环中div的显示/隐藏

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

php jquery

使用Jquery和PHP切换foreach循环中div的显示/隐藏,php,jquery,foreach,toggle,show-hide,Php,Jquery,Foreach,Toggle,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;

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显示/隐藏键类型，并在键名称和键名称之间切换2

我怎样才能做到这一点？我当前的代码只影响第一行结果

以下是代码的其余部分：

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


.hide{display:none；}
jQuery（文档）.ready（函数（$）{
$（'input[type=“checkbox”]”）。单击（函数（）{
if（$（this.attr（“value”）==“changename”）{
$（“#kname”）.toggle（）；
}否则{
$（“#kname2”）.toggle（）；
}
if（$（this.attr（“value”）==“hidetype”）{
$（“#ktype”）.toggle（）；
}
});
});
切换名称
隐藏标题
我的代码工作不正常。

您正在所有元素上添加相同的id

首先，对元素使用类而不是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中使用数据属性以方便访问

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


切换名称
隐藏标题
$（“#切换名称框”）。单击（函数（）{
$（'.change name'）。每个（函数（）{
cur=$（this.text（）；
$（this）.text（cur==$（this.data（'name1'）？$（this.data（'name2'）：$（this.data（'name1'））；
});
});
$（“#切换标题框”）。单击（函数（）{
$（'.toggle title'）。每个（函数（）{
$（this.toggleClass（'hide'）；
});
});
和jsfiddle

id=“kname”
——所有元素都具有相同的id，这是非法的。DOM ID在整个文档中必须是唯一的。由于它们必须是唯一的，getElementById将只返回它找到的第一个匹配元素，因为在同一文档中的其他地方不可能有任何重复的ID。那么我该如何使每个输出唯一？如果我点击chkbox，所有元素都会像它应该的那样隐藏吗？但这会在“foreach”语句中起作用吗。请记住，只有一个回显行隐藏，其他行不隐藏，即使它们具有相同的id或类名。我的意思是“ktype”和“hidetype”作为值。我已经更新了thx。谢谢@DaveK。您在JSFIDLE中提供的示例似乎有问题。在您的示例中，一个项目的“data-name1”与第二个项目不同，第一个项目上有data-name1=“keyname1”，第二个项目上有data-name1=“keyname2”，两者应该相同，对吗？列表将打印为：
code/*James-Artist，James-Singer，James-Dancer*/
我想把所有的James换成JackNo他们需要不同。我在数据属性中存储这两个备选名称，以便在它们之间切换。基本上，它会检查范围中的当前文本是否为name1，如果是，则将其更改为name2，如果不是，则将其更改为name1。我已经更新了JSFIDLE以反映您的输出示例。 
<?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>