首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >jquery val()会自动从number更改为undefined

jquery val()会自动从number更改为undefined
EN

Stack Overflow用户
提问于 2020-06-18 03:28:39
回答 1查看 46关注 0票数 0

我得到了一个让我发疯的“输入”。输入从PHP函数“回显”到HTML页面。

代码语言:javascript
运行
复制
    '<td class="product-quantity" data-title="Quantity">
                            <div class="quantity">
                <label class="screen-reader-text" for="quantity_5ed41a96cc5c6">Casual shirt quantity</label>
        <input
            type="number"
            id="input'.$e.'"
            class="qtychg input-text qty text"
            step="0.5"
            value="'.$arr[$e]['quantity'].'"
            size="4"
            inputmode="numeric" />
                <span class="product-qty-arrows">
            <span id="'.$e.'" class="product-qty-increase lnr lnr-chevron-up"></span>
            <span id="'.$e.'" class="product-qty-decrease lnr lnr-chevron-down"></span>
        </span>
        </div>
                            </td>'

我可以使用调用以下javascript脚本的span "class="product-qty-increase“来增加/减少输入值:

代码语言:javascript
运行
复制
<script>
$('span').click(function (){

var Id=$(this).attr('id');
var val=$('#input'+Id).val();
var className= this.className;

if(className == "product-qty-increase lnr lnr-chevron-up"){

    val++;

}else if(className == "product-qty-decrease lnr lnr-chevron-down"){

    val--;
}

alert(val);

 $.ajax({
                        type: "POST",
                        url: "actions.php?action=chgQty",
                        data: "key=" + Id +"&val=" + val ,
                        success: function(result) { 
                          location.reload();
                        }
                     })


});
</script>

让我抓狂的问题有两个:

1)弹出两次"alert(val);“!一次使用正确的数字,第二次使用"undefined“

2)很明显,我不能发送$.ajax调用,因为值正在变为未定义。

有什么想法吗?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-06-18 03:38:11

原因是您有嵌套的跨度,并且您将事件处理程序绑定到所有跨度。当您单击向上或向下跨度时,事件会向外冒泡到<span class="product-qty-arrows">,并在那里激发。

使用更具体的选择器,以便只绑定到向上和向下按钮。

代码语言:javascript
运行
复制
$('span.lnr').click(function() {

  var Id = $(this).attr('id');
  var val = $('#input' + Id).val();

  if ($(this).hasClass("product-qty-increase")) {
    val++;
  } else if ($(this).hasClass("product-qty-decrease")) {
    val--;
  }

  alert(val);

  $.ajax({
    type: "POST",
    url: "actions.php?action=chgQty",
    data: {key: Id, val: val},
    success: function(result) {
      location.reload();
    }
  })
});

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/62436938

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档