jQuery当点击按钮后怎样获取相关值？

最新推荐文章于 2022-10-10 21:48:17 发布

동경

最新推荐文章于 2022-10-10 21:48:17 发布

阅读量571

点赞数

分类专栏： #ajax#jQuery

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

版权

#ajax#jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

废话不说直接看代码！
下方的代码我在另外博客里提过，可以点击右方链接可获取详细讲解
OLD

<html>
<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>
<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>

$('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);
    });


    $(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);

        });

    })

上述方法中save button 是在整个div里头，但是假如这个save button单独存在div怎么办？
请看下方代码
与上述的代码区别在于div的布局和js的获取方式
NEW

<html>
<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>
<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>
</div>
<div> <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>
</div>
<div><button type="button" id="save"  value="">SAVE</button></div>
</body>
</html>

$('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);
    });


    $(document).ready(function () {
        $(document).on('click','#save',function () {
            
            let value=$(this).parent().prev().children('#plus_minus_quantity').val();
            let id = $(this).attr("value");
            // console.log(value);
            alert(value);

        });

    })

let value=$(this).parent().prev().children('#plus_minus_quantity').val();

$(this) //表明当前的#save button
$(this).parent()//表明当前 #save button 的父亲，就是<div>
$(this).parent().prev()//表明当前 #save button 的父亲的前者，就是<div>的前者也是<div>
$(this).parent().prev().children('#plus_minus_quantity')
//表明当前 #save button 的父亲的前者的子元素当中获取所想要的id
$(this).parent().prev().children('#plus_minus_quantity').val()
//这个就获取值的意思

동경

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery当点击按钮后怎样获取相关值？

废话不说直接看代码！下方的代码我在另外博客里提过，可以点击右方链接可获取详细讲解OLD<html><head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" > <link ...
复制链接

扫一扫