具有 document.getElementById 的按钮 Onclick 函数

Question

我使用 woocommerce 为每个产品创建了一个按钮，点击它会下拉一个带有相应 ID 的表单。我正在使用 woocommerce 来展示产品，并使用重力形式来展示表格。

我已经放置了这段代码 html 代码来创建按钮的功能：

       <div class="dropdown">
       <button onclick="myFunction()" class="dropbtn">SPECIFY PRODUCT</button>
       <div id="gform_<?php echo get_the_ID(); ?>" class="dropdown-content">
       <?php gravity_form( 1, false, false, false, '', true ); ?>
       </div>
       </div>

我也有这个 html 块上方的脚本（因为我尝试放入头部，但给了我一个 'null is not an object error' 作为 document.GetElem...）

       <script>
       var theid = "<?php echo get_the_ID(); ?>";

       function myFunction() {
       document.getElementById('gform_' + theid).classList.toggle('show');
       }
       </script>

当我去点击 3 个按钮中的任何一个时，它只会在第 3 个按钮上掉下来（先拉那个 ID，而不是其他的）。

我怎样才能让所有的按钮都变成下拉菜单而不只是一个？

任何帮助将不胜感激，因为我已经尝试解决这个问题一段时间了..

这里是link：http://www.ctagroup.com.au/cta-group-home/products/tactile-guidance/suresteel/suresteel-classic/

Answer 1

您可以使用该元素的下一个兄弟元素

 function myFunction(el) {
     el.nextSibling.classList.toggle('show');
 }


 <button onclick="myFunction(this)" class="dropbtn">SPECIFY PRODUCT</button>

Answer 2

试试下面的代码：

<script>
function myFunction(myid) {
 document.getElementById('gform_' + myid).classList.toggle('show');
}
</script>

<div class="dropdown">
 <button onclick="myFunction(<?php echo get_the_ID(); ?>)" class="dropbtn">SPECIFY PRODUCT</button>
 <div id="gform_<?php echo get_the_ID(); ?>" class="dropdown-content">
  <?php gravity_form( 1, false, false, false, '', true ); ?>
 </div>
</div>

Answer 3

或者，我将提供一个 jQuery 解决方案，因为与使用常规 JS 相比，我更喜欢它。 WooCommerce 已经使用它，所以库已经加载。

我会从您的 HTML 中删除 onclick() 并依赖基于 class 的选择器。我假设您只想下拉与单击的按钮相关的表单。

<div class="dropdown">
    <button class="dropbtn">SPECIFY PRODUCT</button>
    <div id="gform_<?php echo get_the_ID(); ?>" class="dropdown-content">
        <?php gravity_form( 1, false, false, false, '', true ); ?>
    </div>
</div>

然后我的 jQuery（您只需要在页脚中使用一次）如下所示：

$( document ).ready(function() {
    $('.dropbtn').click(function(e) {
        e.preventDefault();
        $(this).next().slideToggle();
    })
});

举个例子fiddle

具有 document.getElementById 的按钮 Onclick 函数

button Onclick function with document.getElementById

html

javascript

php

jquery