javascript - how to know the old value of an element onChange or onTrigger in JQuery? - Stack Overflow

admin管理员组

文章数量:1304808

I have a button :

<button id="btn1">55</button>

And so I change the button value to test2

$('#btn1').text("22");

I want to show a background-picture if the buttons oldValue greater then the newValue.

How can I get the old value from this button?

"I have over 100 buttons and they are changing dynamically."

Update: Isn't there an event that fires before it changes?

I have a button :

<button id="btn1">55</button>

And so I change the button value to test2

$('#btn1').text("22");

I want to show a background-picture if the buttons oldValue greater then the newValue.

How can I get the old value from this button?

"I have over 100 buttons and they are changing dynamically."

Update: Isn't there an event that fires before it changes?

• javascript
• jquery

Share Improve this question Follow edited Oct 3, 2012 at 18:27 ЯegDwight 25.3k1010 gold badges4747 silver badges5252 bronze badges asked Oct 3, 2012 at 14:56 VuralVural 8,7461111 gold badges4242 silver badges5858 bronze badges 0

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 5

You could use jQuery's .data() call and store it for retrieval as needed.

For instance, say you HTML is:

HTML

<form action="#" method="GET">
    <input type="text" value="369" />
    <button id="btnID">420</button>
</form>

You could easily first gather the data needed and asign it to each element:

Opening script

$("button") //  would simply grab all buttons, you can use whatever css selector
    .each(function(i) {
        $(this).data("prevVal", parseInt($(this).text()));
    });

You can then later check this value against a new value as needed:

... some change function
    $('#btn1').text("22");
    if ($('#btn1').data("prevVal") > 22) {
        //  do work
    }
    $('#btn1').data("prevVal", 22)

Just FYI

If you were using inputs instead it would be easier:

$("input").each(function(i) { $(this).data("prevVal", parseInt($(this).val())) })
    .on("change", function(e) {
        var newVal = parseInt($(this).val());
        if ($(this).data("prevVal") > newVal) {
            //  do work
        };
        $(this).data("prevVal" newVal);
    });

Or if you wanted to maintain a list of values:

$("input").each(function(i) { 
        $(this).data("vals", new Array());
        $(this).data("vals").push(parseInt($(this).val()));
    })
    .on("change", function(e) {
        $(this).data("vals").push(parseInt($(this).val()));
        var vals = $(this).data("vals");
        if (vals[vals.length-1] > vals[vals.length-2]) {
            //  do work
        };
    });

You need to pare it before changing value.

For example

$('#btn1').text(function (index, old) {
   if (parseInt(old) > 22) {
    //change background image
   }
   return "22";
});

FIDDLE

Unless you preserve it before the change you cannot get the old value. The change event is fired after the value has been changed already.

Not sure where you want the old value.. but if it while changing the text then use the function to change the text.

$('#btn1').text(function (index, oldvalue) {
   console.log(oldvalue);
   return "test2";
});

 <button id="btn1">test1</button>

    ​$(document).ready(function(){
        var i=1;
        $('#btn1').click(function(){
        $(this).data('old', $.trim($(this).text())).text('btn'+(++i));
            alert( $(this).data('old'));
        });
    });​

for demo

use jQuery.data() to store data associated with the specified element and you will be able to get it just by accessing the same element.

Here's the link to show you how to use jQuery.data();

Here's the code using a more convenient .data() link

Set

$("#btn1").data("oldVal",  $("#btn1").html());

Get

$("#btn1").data("oldVal");

Fiddle

本文标签： javascripthow to know the old value of an element onChange or onTrigger in JQueryStack Overflow