php 工作的JavaScript需要得到一个加号+和减号-按钮工作

zz2j4svz 于 2023-05-27 发布在 PHP

关注(0)|答案(1)|浏览(146)

在我们网站的产品页面上添加了一个加号+和减号-按钮，方法是将以下代码行更改为：

$the_button = '<div class="max-qty">' . 
zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . 
        '</div>
            <span class="qty-text">' . PRODUCTS_ORDER_QTY_TEXT . '</span>
            <input type="text" name="cart_quantity" value="' . 
                $products_get_buy_now_qty . 
            '" maxlength="6" size="4" aria-label="' . ARIA_QTY_ADD_TO_CART . '">
            <button type="button" class="minus" >-</button>
            <button type="button" class="plus" >+</button>';

完整的php代码是：

<?php
if (CUSTOMERS_APPROVAL == 3 and 
    TEXT_LOGIN_FOR_PRICE_BUTTON_REPLACE_SHOWROOM == '') 
{
    // do nothing
} else {
?>
<?php
    $display_qty = (($flag_show_product_info_in_cart_qty == 1 
                    and $_SESSION['cart']->in_cart($_GET['products_id'])) 
        ? '<p>' . PRODUCTS_ORDER_QTY_TEXT_IN_CART . 
            $_SESSION['cart']->get_quantity($_GET['products_id']) . 
            '</p>' 
        : '');
    
    if ($products_qty_box_status == 0 or 
        $products_quantity_order_max== 1) 
    {
        // hide the quantity box and default to 1
        $the_button = '<input type="hidden" name="cart_quantity" value="1">';
    } else {
        // show the quantity box
        $the_button = '<div class="max-qty">' . 
        zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . 
        '</div>
        <span class="qty-text">' . PRODUCTS_ORDER_QTY_TEXT . '</span>
        <input type="text" name="cart_quantity" value="' . 
            $products_get_buy_now_qty . 
        '" maxlength="6" size="4" aria-label="' . ARIA_QTY_ADD_TO_CART . '">
        <button type="button" class="minus" >-</button>
        <button type="button" class="plus" >+</button>';
    }
    $the_button .= zen_draw_hidden_field('products_id', (int)$_GET['products_id']);
    $the_button .= zen_image_submit(BUTTON_IMAGE_IN_CART, 
                                    BUTTON_IN_CART_ALT, 
                                    ' id="addToCartButton"');
    $display_button = zen_get_buy_now_button($_GET['products_id'], $the_button);
?>
<?php 
    if ($display_qty != '' or $display_button != '') { 
?>
        <div id="cartAdd">
<?php
            echo $display_qty;
            echo $display_button;
?>
        </div>
<?php   
    } // display qty and button ?>
<?php 
} // CUSTOMERS_APPROVAL == 3 
?>
<!--eof Add to Cart Box-->
</div>
</div>

还在学习php，还没有接触任何JavaScript。如果有人知道添加一些JavaScript的方法，那么如果按下加号+和减号-按钮，将增加默认数量1，或者减少，这取决于按下哪个按钮。

php

来源：https://stackoverflow.com/questions/76325660/working-out-the-javascript-needed-to-get-a-plus-and-minus-button-working

1条答案

按热度按时间

qncylg1j1#

在这里，将其添加到您的网站，它是vanilla JS（可以是一个单独的文件，然后您需要此https://www.w3schools.com/tags/att_script_src.asp）：

<script type="text/javascript">
window.onload = function() {
    document.querySelector('.plus').addEventListener('click', function() {
        var qtyInput = document.querySelector('input[name="cart_quantity"]');
        qtyInput.value = parseInt(qtyInput.value, 10) + 1;
    });

    document.querySelector('.minus').addEventListener('click', function() {
        var qtyInput = document.querySelector('input[name="cart_quantity"]');
        qtyInput.value = parseInt(qtyInput.value, 10) - 1;
    });
}
</script>

编辑：一些正在发生的事情的解释：

onload --当页面加载完所有内容后，这会使代码运行
querySelector -这是指向一个元素的指针，在这里我们指向的是元素类plus。我建议使用id，因为类是最常用的样式。当你有一个具体的，一个元素在脑海中，身份证是最好的。更多https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector.
addEventListener - JS处理事件，你可以添加各种事件，比如onclick，onfocus，onmouseover（https://www.w3schools.com/js/js_events.asp）。第一个参数是事件名称，第二个参数是事件触发时要调用的函数。
qtyInput -我们将一个指针分配给下一行要使用的元素，
我们或者减小或者增大输入元素值。对parseInt的调用是可选的，它只是确保存储的是整数而不是字符串。

另外，我还建议将PHP代码与HTML和JS分开，以提高可读性--这将在未来对你有所帮助。这意味着将get_quantity()等函数的结果分配给文件开头的变量，然后将该变量嵌入到HTML中。
稍后，当你更有信心的时候，我建议你把你的HTML文件完全分开--元素应该有它们的id，比如`，然后添加到它的JS文件中，这个文件可以处理这些id，并单独操作它们。理想情况下，这个javascript会与php对话以获取数据，然后用它更新HTML。最后，一旦你学得更多，一定要考虑学习如何在后端使用Symfony或Laravel等现代框架，在前端使用Vue/React/Angular。

赞(0）回复(0）举报 2023-05-27

我来回答

php 工作的JavaScript需要得到一个加号+和减号-按钮工作

1条答案

相关问题

热门标签

最新问答