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块上面的脚本（因为我试过放入head部分但是给了我一个'null不是文件的对象错误'.GetElem ...）

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

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

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

如何让所有按钮下拉而不只是一个？

任何帮助都会非常感激，因为我一直试图解决这个问题..

以下是链接：http://www.ctagroup.com.au/cta-group-home/products/tactile-guidance/suresteel/suresteel-classic/

Answer 1

尝试下面的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

require_once 'securimage/securimage.php';
$options = array('captcha_type' => Securimage::SI_CAPTCHA_MATHEMATIC);
Securimage::getCaptchaHtml($options);

Answer 3

或者，我将提供一个jQuery解决方案，因为我对它比使用常规JS更舒服。 WooCommerce已经使用它，因此库已经加载。

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

<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

的示例

按钮Onclick函数与document.getElementById

3 个答案: