我想将动态分配的 id 传递给 javascript 函数

Question

我从查询中获得了一个结果集，并且有一个 count 变量，用于将 id 分配给输入标签。现在我想将此 id 作为参数传递给 javascript 函数并递增/递减具有由 count 变量值分配的 id 的文本输入字段值。

用于获取结果的查询：

for (some condition){

    $cartsql = "SELECT * FROM products WHERE id=$key";

    $cartres = mysqli_query($connection, $cartsql);

    $cartr = mysqli_fetch_assoc($cartres);

    ++$count;

    <div class="entry value-minus1" onclick="decrement(<?php echo $count; ?>)"></div>

    <input class="entry value1" type="text" value="<?php echo $value['quantity']; ?>" id="<?php echo $count; ?>" />

    <div class="entry value-plus1" onclick="increment(<?php echo $count; ?>)"></div>

                <!--quantity-->

                <script>

                function decrement(<?php echo $count; ?>) {

                alert("hello");

                var y = document.getElementById(<?php echo $count; ?>).value;

                y = y - 1;

                document.getElementById(<?php echo $count; ?>).value = y;

                }

                </script>

}

Answer 1

首先，第一个 div 中有一个错字。您忘记回显该值。改变：onclick="decrement(<?php $count; ?>)"到onclick="decrement(<?php echo $count; ?>)"然后，由于您将 id 作为参数传递给您的 js 函数，因此您不应该对该函数中的值进行硬编码。您还需要在循环之后输出 javascript，否则您将创建多个具有相同名称的函数，这显然是行不通的。将其更改为：function increment(id) {&nbsp; &nbsp; document.getElementById(id).value++;}function decrement(id) {&nbsp; &nbsp; document.getElementById(id).value--;}现在您的函数中没有硬编码值，因此您可以重用它。

Answer 2

您不需要使用id属性 - 纯粹基于整数的 id 无论如何都是无效的（或者直到 HTML5 才有效）。您可以sibling selectors使用方便。作为演示，可以从根本上改变/简化javascript函数<style>&nbsp; &nbsp; div.entry{ display:inline-block;width:2rem;border:1px solid black; height:2rem; line-height:2rem; text-align:center; font-size:1rem; clear:none; cursor:pointer; }&nbsp; &nbsp; input[type='text']{display:inline-block;height:2rem; }</style><script>&nbsp; &nbsp; function decrement(e){&nbsp; &nbsp; &nbsp; &nbsp; e.target.nextElementSibling.value--;&nbsp; &nbsp; }&nbsp; &nbsp; function increment(e){&nbsp; &nbsp; &nbsp; &nbsp; e.target.previousElementSibling.value++;&nbsp; &nbsp; }</script>for( $i=1; $i < 10; $i++ ){&nbsp; &nbsp; $value=mt_rand(20,50);&nbsp; &nbsp; echo "&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <div class='entry value-minus1' onclick='decrement(event)'>-</div>&nbsp; &nbsp; &nbsp; &nbsp; <input class='entry value1' type='text' value='$value' />&nbsp; &nbsp; &nbsp; &nbsp; <div class='entry value-plus1' onclick='increment(event)'>+</div>&nbsp; &nbsp; </div>";}更好的是删除任何内联函数调用并使用外部注册的事件处理程序 - 这使 HTML 保持美观和干净，并将 HTML 和 javascript 分开。<script>&nbsp; &nbsp; document.addEventListener('DOMContentLoaded',()=>{&nbsp; &nbsp; &nbsp; &nbsp; document.querySelectorAll('div.entry').forEach( div=>{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; div.addEventListener('click',function(e){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; switch( this.dataset.dir ){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case 'increment':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.previousElementSibling.value++;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case 'decrement':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(this.nextElementSibling.value > 0) this.nextElementSibling.value--;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; });</script>for( $i=1; $i < 10; $i++ ){&nbsp; &nbsp; $value=mt_rand(5,50);&nbsp; &nbsp; echo "&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <div class='entry value-minus1' data-dir='decrement'>-</div>&nbsp; &nbsp; &nbsp; &nbsp; <input class='entry value1' type='text' value='$value' />&nbsp; &nbsp; &nbsp; &nbsp; <div class='entry value-plus1' data-dir='increment'>+</div>&nbsp; &nbsp; </div>";}