单击函数更改具有相同类名的所有元素 - javascript

我有一个在php循环中迭代的具有相同类名的div。只要单击更多链接，所有具有class ='detail-section'的div就会被打开和关闭，而不仅仅是在循环中选择的那个。我试过$（this）.closest，它似乎并没有改变任何东西。可能是因为它没有关闭或其他原因。我不知道。任何帮助是极大的赞赏。

foreach($rows as $a => $b){
  <div><a class='more-detail' style='cursor: pointer; font-color:#0000ff;'>More...</a></div>

  <div class='detail-section' style='display: none;'> 
     <!--Content-->
  </div>

  <div><a class='less-detail' style='cursor: pointer; font-color:#0000ff;'>Less...</a></div>
}

这是我的脚本

<script>
$(document).ready(function(){

  $(".more-detail").click(function(){
    $(".detail-section").css("display", "block");
    $(".more-detail").css("display", "none");
    $(".less-detail").css("display", "block");
  });

  $(".less-detail").click(function(){
    $(".detail-section").css("display", "none");
    $(".more-detail").css("display", "block");
    $(".less-detail").css("display", "none");
  });

});
</script>

参考方案

首先，您必须将html div更改为以下几行：

<div>
  <a class='more-detail' style='cursor: pointer; font-color:#0000ff;'>More...</a>
    <div class='detail-section' style='display: none;'>
        details details details details details details details details details details 
    </div>
    <a class='less-detail' style='cursor: pointer; font-color:#0000ff;'>Less...</a>
</div>

然后将您的jquery更改为此：

       $(".more-detail").click(function(){
            var $this = $(this);
            var $detail = $this.next(".detail-section");
            var $lessDetail = $detail.next(".less-detail");
            $this.css("display", "none");
            $detail.css("display", "block");
            $lessDetail.css("display", "block");
        });

        $(".less-detail").click(function(){
            var $this = $(this);
            var $detail = $this.prev(".detail-section");
            var $moreDetails = $detail.prev(".more-detail");
            $detail.css("display", "none");
            $moreDetails.css("display", "block");
            $this.css("display", "none");
        });

打印二维阵列 - javascript

我正在尝试打印子元素。在this example之后。怎么做？。$myarray = array("DO"=>array('IDEAS','BRANDS','CREATIVE','CAMPAIGNS'), "JOCKEY"=>a…

保留文本区域的数据或值，然后选择输入 - javascript

通过$ _POST提交表单时，输入文件值仍然保留。像这样： if($_POST){ $error = false; if(!$post['price']){ $error = true; $error_note['price'] = "*Should not be empty"; } if($err…

变更事件时道具无法正常工作 - javascript

我有一些代码，当用户从下拉列表中选择一个项目时，这会触发一个change事件，然后调用php页面进行处理。首次加载页面时，我选择一个项目，并在触发change事件时，这应更改所选select输入的占位符并禁用相同的输入：“＃box_ffrtv”。但是，发生的事情是更改仅在我在下拉菜单中进行了第二选择之后才发生，然后更改了占位符并禁用了输入。我对jquery还…

将简单的javascript代码转换为c＃ - javascript

昨天我在这里问了一个问题。使用javascript和html解决方案很简单前一阵子我打算什么是操纵html来执行javascript中的任务但是我改变了主意，将javascript代码重写为c＃这是输入<Abstract> <Heading>Abstract</Heading> <Para TextBreak=�…

包含“。”的onClick函数参数 - javascript

我正在尝试创建一个表，该表包含该表的“更改密码”列中各项的onClick函数，以便我的系统管理员可以更改每个人的密码。每个onClick都会调用函数“ ChangePassOpen”，该函数将打开一个带有新密码输入框和另一个按钮的模式，以实际调用该函数来更改密码。为了使我的程序能够识别管理员正在更改的帐户，我需要将用户名作为参数传递，但是我的用户名包含“。”…