jQuery如何获取点击按钮之后的相关值

最新推荐文章于 2021-12-14 12:58:23 发布

동경

最新推荐文章于 2021-12-14 12:58:23 发布

阅读量2k

点赞数 1

分类专栏： #ajax#jQuery

本文链接：https://blog.csdn.net/weixin_43814775/article/details/104736993

版权

#ajax#jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

首先看一下下方代码：

引用Bootstrap，jQuery API

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" >
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script>
</head>

Html

<html>
<body>
<div class="col-md-3 py-5">
    <button type="button" class="btn bg-light border rounded-circle" id="minus">
        <i class="fas fa fa-minus"></i>
    </button>
    <input type="text" id="plus_minus_quantity" value="1" class="form-controls w-25 d-inline">
    <button type="button" class="btn bg-light border rounded-circle" id="plus">
        <i class="fas fa fa-plus"></i>
    </button>
    <button type="button" id="save" value="">SAVE</button>
</div>
<div class="col-md-3 py-5">
    <button type="button" class="btn bg-light border rounded-circle" id="minus">
        <i class="fas fa fa-minus"></i>
    </button>
    <input type="text" id="plus_minus_quantity" value="1" class="form-controls w-25 d-inline">
    <button type="button" class="btn bg-light border rounded-circle" id="plus">
        <i class="fas fa fa-plus"></i>
    </button>
    <button type="button" id="save" value="">SAVE</button>
</div>
</body>
</html>

JavaScript

//  实现点击增加/减少按钮之后的变化
$('div button i.fa-plus').parent().click(function(){
        let last_value = $(this).parent().children("input").val();
        last_value++;
        $(this).parent().children("input").val(last_value);
    });
    $('div button i.fa-minus').parent().click(function(){
        let last_value = $(this).parent().children("input").val();
        if(last_value <= 1) return;
        last_value--;
        $(this).parent().children("input").val(last_value);
    });

//点击save之后获取相关值
    $(document).ready(function () {
        $(document).on('click','#save',function () {
            let value= $('#plus_minus_quantity').val();
            let id = $(this).attr("value");
            // console.log(value);
            alert(value);

        });

    })

执行之后的图片：
在这里插入图片描述

具体描述：
当点击第一个增加按钮，点击save按钮之后窗口会获取——你所选的正确的value值；
但是当点击第二个增加按钮，点击save按钮之后窗口不能获取——你所选的正确的value值，而是抛出第一个增加按钮之后的value值。

解决方法：
1.这时候会用一下jQuery的新知识，siblings method，想看具体sblings用法的话点击下方链接
siblings method
2.我们稍微改一下上方写的代码：

$(document).ready(function () {
        $(document).on('click','#save',function () {
            // Changed this line to reference the sibling of the button that was clicked
            let value= $(this).siblings('#plus_minus_quantity').val();
            let id = $(this).attr("value");
            // console.log(value);
            alert(value);

        });

    })