How jQuery gets the relevant value after the button is clicked

First look at the code below:

Quote 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);

        });

    })

Picture after execution:
Insert picture description here

specific description:
When you click the first add button and click the save button, the window will get the correct value you selected;
But when the second increase button is clicked, the window cannot be obtained after clicking the save button-the correct value you selected, but the value after the first increase button is thrown.

Solution:
1. At this time, I will use the new knowledge of jQuery, siblings method. If you want to see specific sblings usage, click the link below
siblings method
2. Let's slightly change the code written above:

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

        });

    })

3. Okay!

siblingsLiteral translation is the meaning of brothers and sisters.
That is, it can get all the elements around the selected element, and can use appropriate methods to bring changes in its surroundings.

How jQuery gets the relevant value after the button is clicked

Guess you like