个人中心
gpt4 book ai didi

javascript - 单击时增加多个元素

转载 作者：行者123 更新时间：2023-11-28 05:54:31 25 4
gpt4 key购买 nike

这是我第一次使用 JavaScript，我很难集成 HTML、CSS 和 JavaScript。我(在许多人的帮助下)编写了一个程序，可以通过单击如下所示的按钮来增加/减少产品数量:

HTML

<body>
<table>
  <tr>
    <td>Shirt</td>
    <td>2$</td>
    <td>
      <form id='shirt' method='POST' action='' >
        <input type='button' value='-' class='qtyminus' field='shirt_count' />
        <input type='text' name='shirt_count' value='0' class='qty' readonly="readonly"/>
        <input type='button' value='+' class='qtyplus' field='shirt_count' />
      </form>
    </td>
  </tr>
  <tr>
    <td>Suit</td>
    <td>3$</td>
    <td>
      <form id='suit' method='POST' action='#' >
        <input type='button' value='-' class='qtyminus' field='suit_count' />
        <input type='text' name='suit_count' value='0' class='qty' readonly="readonly"/>
        <input type='button' value='+' class='qtyplus' field='suit_count' />
      </form>
    </td>
  </tr>
</table>

  <h4>
    Total items: <span id="displayCount">0</span>
    <p>
    Total price: <span id="displayCount">0</span>
  </h4>
</body>

JavaScript

jQuery(document).ready(function(){
    $('.qtyplus').click(function(e){
        e.preventDefault();
        fieldName = $(this).attr('field');
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        if (currentVal == 10) {
          $('input[name='+fieldName+']').val(currentVal);
        }
        else if (!isNaN(currentVal) ) {
          $('input[name='+fieldName+']').val(currentVal + 1);  
        }
        else {
          $('input[name='+fieldName+']').val(0);
        }
    });

    $('.qtyminus').click(function(e) {
        e.preventDefault();
        fieldName = $(this).attr('field');
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        if (!isNaN(currentVal) && currentVal > 0) {
            $('input[name='+fieldName+']').val(currentVal - 1);
        } else {
            $('input[name='+fieldName+']').val(0);
        }
    });
});

也可以在这里看到:http://jsfiddle.net/51ob29sL/

但问题是，我希望当我单击按钮时“总元素”增加/减少。有没有办法一次点击调用 2 个函数？

此外，对于“总价”部分，我想将商品各自的价格添加到变量中。我觉得我可能需要为每个元素创建一个对象，但尝试这样做失败了。

任何帮助或提示，我们将不胜感激。

最佳答案

欢迎来到堆栈溢出:-)

在提出你自己的问题之前，请确保你搜索了 Stack Overflow，以避免被投票...

正如此处的回答... jQuery - Append an event handler to preexisting click event

您甚至可以通过调用...来添加另一个单击功能

$('.qtyminus').click(function(e) {
    // Function code here
})

但是您可以创建一个函数来执行您想要执行的操作，如下所示(假设价格 span 的 id 是 displayPrice 不重复 displayCount )...

function updateItemsAndPrice() {
  var suits = parseInt($('input[name=suit_count]').val()),
      shirts = parseInt($('input[name=shirt_count]').val());
  $('#displayCount').html(suits + shirts)
  $('#displayPrice').html(suits * 3 + shirts * 2)
}

并在底部的相同事件处理程序中调用它，以便在更新值(value)后重新计算价格和总元素...

$('.qtyplus').click(function(e){
    // Your other code
    updateItemsAndPrice();
});

$('.qtyminus').click(function(e) {
    // Your other code
    updateItemsAndPrice();
});

这是一个 fiddler ...但尝试先不看它;-)

http://jsfiddle.net/51ob29sL/4/

关于javascript - 单击时增加多个元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37812375/

25 4 0
文章推荐： c++ - std::set_intersection，带偏移量的交集列表
文章推荐： html - 如何在我的 html 页面中链接外部页面
文章推荐： c++ - 即使没有按下任何按钮，事件类型也设置为 SDL_MOUSEBUTTONDOWN
文章推荐： css - Ionic css 页脚背景颜色和标题颜色
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com