Comment utiliser une variable comme clé dans un objet JavaScript littéral ?

Question

Pourquoi ce qui suit fonctionne-t-il ?

<something>.stop().animate(
    { 'top' : 10 }, 10
);

Alors que cela ne fonctionne pas :

var thetop = 'top';
<something>.stop().animate(
    { thetop : 10 }, 10
);

Pour être encore plus clair : Pour le moment, je ne suis pas en mesure de passer une propriété CSS à la fonction animate en tant que variable.

Answer 1

De cette façon, vous pouvez également obtenir le résultat souhaité

var jsonobj={};
var count=0;
$(document).on('click','#btnadd', function() {
    jsonobj[count]=new Array({ "1"  : $("#txtone").val()},{ "2"  : $("#txttwo").val()});
    count++;
    console.clear();
    console.log(jsonobj);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>value 1</span><input id="txtone" type="text"/>
<span>value 2</span><input id="txttwo" type="text"/>
<button id="btnadd">Add</button>

Answer 2

Vous pourriez faire ce qui suit pour ES5 :

var theTop = 'top'
<something>.stop().animate(
  JSON.parse('{"' + theTop + '":' + JSON.stringify(10) + '}'), 10
)

Ou extraire vers une fonction :

function newObj (key, value) {
  return JSON.parse('{"' + key + '":' + JSON.stringify(value) + '}')
}

var theTop = 'top'
<something>.stop().animate(
  newObj(theTop, 10), 10
)