Ich versuche mit jQuery herumzuspielen und habe mich gefragt, wie ich die folgende Situation erreichen kann:

Du hast einen Knopf und einen Div.

<div class="test"></div>
<button id="move">Move</button>

Sie klicken auf die Schaltfläche und die marginLeft des Div wird um 50px erhöht.

Ich habe die folgende jsFiddle erstellt, die für den ersten Klick funktioniert, jedoch nicht für nachfolgende Klicks.

http://jsfiddle.net/9KgjQ/

$( "#move" ).on( "click", function() {
      $( ".test" ).css({
          marginLeft: function( margin, value ) {
              margin += 50;
              value = margin + "px";
              return value;
              }
      });
 });

Wie geht das?

0
Raphael Rafatpanah 4 Dez. 2013 im 20:44

3 Antworten

Beste Antwort

Ihre marginLeft-Funktion hat die falschen Parameter. Der erste ist der Index, während der zweite der aktuelle Wert ist. Sie könnten also Folgendes tun:

$(function() {
    $( "#move" ).on( "click", function() {
        $( ".test" ).css({
            marginLeft: function( index, margin ) {
                margin = parseInt(margin, 10) + 50;
                value = margin + "px";
                return value;
            }
        });
    });
});
4
ebi 4 Dez. 2013 im 16:52

Versuchen:

$(function() {
  $( "#move" ).on( "click", function() {
      $( ".test" ).animate({
          "margin-left":"+=50px"
      });
   });

});

DEMO hier.

2
Hiral 4 Dez. 2013 im 16:48

Versuche dies,

$(function() {

  $( "#move" ).on( "click", function() {
      var mleft= $( ".test" ).css('margin-left');
         mleft=mleft.split('p')[0]-0;
      var newMargin=+mleft+50;
      $( ".test" ).css('margin-left',newMargin+'px');

   });

});

Neue Arbeitsdemo

2
Anand Jha 4 Dez. 2013 im 16:54