在jquery中显示按钮单击的详细信息

Question

我的页面中有三个项目，每个项目都有自己的按钮。 我想要做的是每当点击一个按钮时，所选按钮的细节应显示在里面。 我对这种编程情况完全不熟悉。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <!------first item--->
    <div class="parentofitem">
    
    	<div class="item_name">
    		Item 1
    	</div>
    	<div class="item_price">
    	100	
    	</div>
    	<div class="quantity">
    		<input type="number" value="1" max="10"/>
    	</div>
    	<div class="addbut">
    		<button class = "btn btn-default addwork" id="add1">ADD</button>
    	</div>
    </div>
    <!------second item--->
    <div class="parentofitem">
    
    	<div class="item_name">
    		Item 2
    	</div>
    	<div class="item_price">
    	180	
    	</div>
    	<div class="quantity">
    		<input type="number" value="1" max="10"/>
    	</div>
    	<div class="addbut">
    		<button class = "btn btn-default addwork" id="add2">ADD</button>
    	</div>
    </div>
    <!------Third item--->
    <div class="parentofitem">
    
    	<div class="item_name">
    		Item 3
    	</div>
    	<div class="item_price">
    	280	
    	</div>
    	<div class="quantity">
    		<input type="number" value="1" max="10"/>
    	</div>
    	<div class="addbut">
    		<button class = "btn btn-default addwork" id="add3">ADD</button>
    	</div>
    </div>
    </div>
    <aside>
    	<div>Seleted items and there details should be shown here</div>
    </aside>

Answer 1

这是一个可重复使用的代码，您可以使用它来解决您的问题，它还可以计算价格，只需一点点样式，它看起来会更好：）

＆＃13;

＆＃13;

item1={
 button:$(".addwork1"),
 name:$(".item_name1"),
 price:$(".item_price1"),
 quantity:$(".quantity1 >input"),
 result:$(".result1")

}
item2={
 button:$(".addwork2"),
 name:$(".item_name2"),
 price:$(".item_price2"),
 quantity:$(".quantity2 >input"),
  result:$(".result2")

}
item3={
 button:$(".addwork3"),
 name:$(".item_name3"),
 price:$(".item_price3"),
 quantity:$(".quantity3 >input"),
 result:$(".result3")
}

function getresult(data){
data.button.on("click",()=>{
data.result.text("The :" + data.name.text() + 
                   " The total price: "+ (data.price.text() * data.quantity.val()) + 
                   " Quantity: " + data.quantity.val() )
})
}

getresult(item1);
getresult(item2);
getresult(item3);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<!------first item--->
<div class="parentofitem">

    <div class="item_name1">
        Item 1
    </div>
    <div class="item_price1">
    100 
    </div>
    <div class="quantity1">
        <input type="number" value="1" max="10"/>
    </div>
    <div class="addbut">
        <button class = "btn btn-default addwork1" id="add1">ADD</button>
        <div class="result1"></div>
    </div>
</div>
<!------second item--->
<div class="parentofitem">

    <div class="item_name2">
        Item 2
    </div>
    <div class="item_price2">
    180 
    </div>
    <div class="quantity2">
        <input type="number" value="1" max="10"/>
    </div>
    <div class="addbut">
        <button class = "btn btn-default addwork2" id="add2">ADD</button>
        <div class="result2"></div>
    </div>
</div>
<!------Third item--->
<div class="parentofitem">

    <div class="item_name3">
        Item 3
    </div>
    <div class="item_price3">
    280 
    </div>
    <div class="quantity3">
        <input type="number" value="1" max="10"/>
    </div>
    <div class="addbut">
        <button class = "btn btn-default addwork3" id="add3">ADD</button>
        <div class="result3"></div>
    </div>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;