jQuery在单击和替换时附加值

Question

I'm trying to append the button text to the span but have it only show the value from the last clicked button under each .item .

So whatever the button text is that is clicked, append it to the span and have that value replaced by the next pressed button text, and so on.

 $(".list").on("click", ".button", function() { var x = $(this).closest(".item"); var y = $(".button").text(); $('#value').append('(' + y + ')'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="list"> <div class="item"> <div>Item 1</div> <button class="button">50</button> </div> <div class="item"> <div>Item 2</div> <button class="button">30</button> </div> <div class="item"> <div>Item 3</div> <button class="button">70</button> </div> </div> <span id="value">Total:</span> 

Answer 1

I would structure your html a little like this and then target the span and update it using .text() . I used the <span> inside of the <p> tag like this because if you try and update the whole span tag, it'll also remove the total: text. I also trimmed up the jquery here a little bit by removing var x = $(this).closest(".item"); as we didn't need it in this case (not sure what that was in there for).

$('#value span').text(y);

 $('.button').on('click', function() { var y = $(this).text(); $('#value span').text(y); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="list"> <div class="item"> <div>Item 1</div> <button class="button">50</button> </div> <div class="item"> <div>Item 2</div> <button class="button">30</button> </div> <div class="item"> <div>Item 3</div> <button class="button">70</button> </div> </div> <p id="value">Total: (<span>0</span>)</p> 

Answer 2

The Issue:

What you've asked jQuery to do is to append the text value of every object with a class of '.button', since all three buttons have that class, you're getting the text value of each button no matter which you click.

The Solution:

Use the 'this' keyword! In the context of a click listener, the 'this' keyword will refer to the control that fired the event. In other words, the control that was clicked. Now you will only be appending the value of one button with each click.

For Example:

 $(".list").on("click", ".button", function () { var y = $(this).text(); $('#value').append('(' + y + ')'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="list"> <div class="item"> <div>Item 1</div> <button class="button">50</button> </div> <div class="item"> <div>Item 2</div> <button class="button">30</button> </div> <div class="item"> <div>Item 3</div> <button class="button">70</button> </div> </div> <span id="value">Total:</span> 

Hope that helps!

** -EDIT- **

To REPLACE the value with each click you'd want to use the .text() method to insert the value into the text property of the control. Since you currently have "Total" in there, you'd also need to insert that programatically, or like I did, move it outside your span element.

 $(".list").on("click", ".button", function () { var y = $(this).text(); // Use .text instead of .append. $('#value').text('(' + y + ')'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="list"> <div class="item"> <div>Item 1</div> <button class="button">50</button> </div> <div class="item"> <div>Item 2</div> <button class="button">30</button> </div> <div class="item"> <div>Item 3</div> <button class="button">70</button> </div> </div> <div>Total: <span id="value"></span></div> 

Answer 3

Maybe just replace

$('#value').append('(' + y + ')');

with

$('#value').html('(Total:' + y + ')');