手风琴中的刷新按钮

Question

I would like to update the accordion header FormationName information directly from UI when user clicks on refresh button.

However, in the current design accordion header is updated by hard coded string ("party") just for testing purpose. When user clicks on refresh button first accordion header FormationName is updated.

$("#refresh").click(function () {
    myData.offsetFormations[0]["FormationName"] = "party";
    $('#accordion').accordion('destroy');
    build();
});

http://jsfiddle.net/xg7cr0g4/85/

Answer 1

Ok, here's what I came up with. First, add all elements with the class .formationName into an array. It should have the same length as your myData.offsetFormations :

var names = [];
var counter = 0;
$(".formationName").each(function(){
   names[counter] = $(this).text();
   counter++;
});

Logging this element will result in an array of 8 names, which have the values of the headers (adjusted or otherwise.)

Next, loop over your myData.offsetFormations and set the value of [i]["FormationName"] to that of the name array:

for(var i = 0; i < myData.offsetFormations.length; i++){
  myData.offsetFormations[i]["FormationName"] = names[i];
} 

Your whole function should look like this:

$("#refresh").click(function () {
    var names = [];
    var counter = 0;
    $(".formationName").each(function(){
       names[counter] = $(this).text();
        counter++;
    }); 
    for(var i = 0; i < myData.offsetFormations.length; i++){
         myData.offsetFormations[i]["FormationName"] = names[i];
    }

    $('#accordion').accordion('destroy');
    build();
});

And here's the updated fiddle showing the function in action:

JSFiddle

Hope that helps!