我想将动态分配的 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) {

    document.getElementById(id).value++;

}

function decrement(id) {

    document.getElementById(id).value--;

}

现在您的函数中没有硬编码值，因此您可以重用它。

Answer 2

您不需要使用id属性 - 纯粹基于整数的 id 无论如何都是无效的（或者直到 HTML5 才有效）。您可以sibling selectors使用方便。作为演示，可以从根本上改变/简化javascript函数

<style>

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

    input[type='text']{display:inline-block;height:2rem; }

</style>

<script>

    function decrement(e){

        e.target.nextElementSibling.value--;

    }

    function increment(e){

        e.target.previousElementSibling.value++;

    }

</script>

for( $i=1; $i < 10; $i++ ){

    $value=mt_rand(20,50);

    echo "

    <div>

        <div class='entry value-minus1' onclick='decrement(event)'>-</div>

        <input class='entry value1' type='text' value='$value' />

        <div class='entry value-plus1' onclick='increment(event)'>+</div>

    </div>";

}

更好的是删除任何内联函数调用并使用外部注册的事件处理程序 - 这使 HTML 保持美观和干净，并将 HTML 和 javascript 分开。

<script>

    document.addEventListener('DOMContentLoaded',()=>{

        document.querySelectorAll('div.entry').forEach( div=>{

            div.addEventListener('click',function(e){

                switch( this.dataset.dir ){

                    case 'increment':

                        this.previousElementSibling.value++;

                    break;

                    case 'decrement':

                        if(this.nextElementSibling.value > 0) this.nextElementSibling.value--;

                    break;

                }

            });

        })

    });

</script>

for( $i=1; $i < 10; $i++ ){

    $value=mt_rand(5,50);

    echo "

    <div>

        <div class='entry value-minus1' data-dir='decrement'>-</div>

        <input class='entry value1' type='text' value='$value' />

        <div class='entry value-plus1' data-dir='increment'>+</div>

    </div>";

}