ナンセンスな話をせずにコードを見てください!
以下のコードについては別のブログで説明しました。右側のリンクをクリックすると、詳細な説明が表示されます。
古い
<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);
});
})
上記の方法では、保存ボタンはdiv全体にありますが、保存ボタンがdivに単独で存在する場合はどうなりますか?
以下のコードと上記のコードの
違いは、divのレイアウトとjsの取得方法です。
新着
<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()
//这个就获取值的意思