0

Sorry for the long question. I have something like the following code:

$("#el1, #el2, #el3, #el4, #el5").on("spinstop", function (event, ui) { 
    updtpg() 
});

#el1, #el2 etc. are all jQuery UI spinners. There are, however, several more than five on the page (around twenty, but some are sometimes hidden) among other buttons, dropdowns, and checkboxes. I hook up each one to the function updtpg, which grabs the values from the spinners and does some calculations, updating a results div.

I'm storing jQuery objects for each spinner in a global object like so:

var window.gQ = {};
gQ.$el1 = $("#el1");
gQ.$el2 = $("#el2");

... and using these in the updtpg function to grab the values of the spinners. What I'd like to do is also use properties in this global gQ object to hold the values of these spinners. That means, however, hooking up each spinner like so:

gQ.$el1.on("spinstop", function (event, ui) { 
    gQ.$val1 = gQ.$el1.val(); 
    updtpg(); 
});

gQ.$el2.on("spinstop", function (event, ui) { 
    gQ.$val2 = gQ.$el2.val(); 
    updtpg(); 
});

...and so on for every spinner. I don't mind doing that if it makes sense. And I guess that's my question. Is that the "correct" way. I think so because I don't want to have to read the val() function for each spinner every time one of them changes, but it also adds a lot of code. Pretty repetitive code, to boot. If there's a better way, and I can't imagine there's not, what is it?

And feel free to correct anything else you see that looks... uh, improvable. Thanks in advance.

4

2 回答 2

0

经验法则是任何时候复制代码都有更好的方法，下面是一个示例。首先创建您的主数组，为所有微调器创建您的事件处理程序。在每个事件上，我们将使用新值创建或更新数组并调用您的函数，这将基于微调器 id 创建一个键值对。

// Create the main array
var gQ = {};

$( "#spinner1, #spinner2, #spinner3" ).on("spinstop",function (event, ui) {
    gQ[$(this).attr("id")] = $(this).val();
    updtpg(); 
});

另一个技巧是在每个微调器上使用一个类，这样您就不必指定所有的 id，而只需指定一个类。

  <input id="spinner1" class="specialspinner" name="spinner" value="5.06" />
  <input id="spinner2" class="specialspinner" name="spinner" value="5.06" />
  <input id="spinner3" class="specialspinner" name="spinner" value="5.06" />

    $( ".specialspinner" ).on("spinstop",function (event, ui) {
        gQ[$(this).attr("id")] = $(this).val();
        updtpg(); 
    });
于 2013-09-03T22:49:21.977 回答
0

HTML

<input class="spinner" id="spinnerOne" type="text" />
<input class="spinner" id="spinnerTwo" type="text" />
<input class="spinner" id="spinnerTree" type="text" />
<div id="values"></div>

JS（将“change”事件绑定与绑定到您的“spinstop”事件交换）

// values of spinner
var spinnerValues = {};

$('.spinner').each(function() {

    // save jquery object
    var $this = $(this);

    // get id of spinner for saving values reference
    var spinnerId = $this.attr('id');

    // init values object
    spinnerValues[spinnerId] = $this.val();

    // attach event callback
    $this.on('change', function (event, ui) {

        // update values
        spinnerValues[spinnerId] = $this.val();

        // debug output - remove later!
        console.log(spinnerValues);

    });

});

JSFiddle 示例：http: //jsfiddle.net/QNwjd/

于 2013-09-03T23:04:28.683 回答