Question

我有一个功能应该制作一个div＆＃34; first＆＃34;消失并制造另一个＆＃34;秒＆＃34;出现。我知道我可以用Jquery做到这一点，但更愿意用vanilla JS做到这一点。这是一个帖子列表，每个帖子都有一个编辑按钮。编辑按钮调用函数和＆＃34; second＆＃34; div出现时具有相同的数据，尽管预填表格字段值已准备好进行编辑。

我在codepen中进行了类似的设置，但是在我的项目中并没有。谁能明白为什么？

来自codepen：https://codepen.io/anon/pen/vegdzO

   <div class='square' style='height: 200px; width: 200px; background: 
   red;'>PARENT

  <div class='lil-square' style='height: 100px;      width: 100px; 
  background: green; margin: 20px;' onclick='openEdit(this)'>CHILD</div>   
  </div>

  <div class='square' style='height: 200px; width: 200px; background: blue; 
  display: none;'>NEXT SIBLING  

  </div>

JS：

  function openEdit(element) 
  {
   element.parentNode.style.display = 'none';

   element.parentNode.nextElementSibling.style.display = 'block';
  }

来自我的项目：

    <?php
    foreach($sessions as $index)
            {       
            echo "<div class='wrap'>
                    <div class='well session' id='first'> 
                            Date: ".$index['session_date']."<br>
                            Trainer: ".$index['trainer']."<br>
                            Clinic: <a class='clinic-link' title='Click to see clinic sessions'>".$index['org']."</a><br>
                            Duration: ".$index['duration']." hours <br> <br>                                     
                            Note: ".$index['session_note']."<br><br>
                            <a class='btn btn-lg btn-default edit' class='edit-button' onclick='openEdit(this)'>Edit</a>
                    </div>                 

                    <div class='well edit-form' id='second'>
                            <form>
                                    <label for='session_edit_date'>Date:</label> 
                                            <input type='date' name='session_edit_date' id='session_edit_date' value='".$index['session_date']."'><br>
                                    <label for='session_edit_trainer'>Trainer:</label>
                                            <input type='text' name='session_edit_trainer' id='session_edit_trainer' value='".$index['trainer']."'><br>
                                    <label for='session_edit_clinic'>Clinic:</label>
                                            <input type='text' name='session_edit_clinic' id='session_edit_clinic' value='".$index['org']."'><br>
                                    <label for='session_edit_duration'>Duration:</label>
                                            <input type='text' name='session_edit_duration' id='session_edit_duration' value='".$index['duration']."'><br>
                                    <label for='session_edit_note'>Note:</label>
                                            <input type='textarea' name='session_edit_note' id='session_edit_note' value='".$index['session_note']."'><br>  
                            </form> 
                    </div> 
                    </div> ";
            }
    ?>

JS：

  <script>
    function openEdit(element) {
    element.parentNode.style.display = 'none';
    element.parentNode.nextElementSibling.style.display = 'block';    
    }
    </script>

Answer 1

我不知道有什么变化解决了这个问题。我原来的代码还可以......我刚刚重写了部分并且它有效，所以这是一个侥幸的错误。如果帖子对任何人都没用，请删除该帖子，并感谢所有提供帮助的人。

相同的功能适用于一个代码但不适用于其他代码

1 个答案: