Javascript onclickで画像を移動しますか？

Question

私は画像といくつかのリンクを含むウェブページを持っています。リンクのそれぞれは、クリックされると異なる機能を実行する。

リンクをクリックすると、moveという関数が呼び出されます。このリンクをクリックすると、右に20ピクセル移動するには画像（bird）が必要です。

これまでのところ、私の機能は次のようになります。

function move(e) { 
    bird.style.position = "relative"; 
    bird.style.left += "20px"; 
    e.preventDefault();  //prevents the page from redirecting 
} 

これは動作しますが、一度だけ。リンクをクリックすると、birdは20ピクセル右に移動しますが、これは1回だけ発生します。私は、リンクがクリックされるたびに、写真を20ピクセル以上動かす必要があります。友人は "それを追加する前にそれを解析する"と言いましたが、どういう意味なのか分かりません。何を解析する必要がありますか？どんな提案/助けもありがとうございます。ありがとう！ここで

Answer 1

私達は行く：

HTML：

<div id="block"></div> 
<button id="go">&raquo; Run</button> 

のjQuery：

$("#go").click(function(){ 
    var dest = parseInt($("#block").css("margin-left").replace("px", "")) + 100; 
    if (dest > 500) { 
     $("#block").animate({ 
      marginLeft: "10px" 
      }, 500); 
    } 
    else { 
     $("#block").animate({ 
     marginLeft: dest + "px" 
     }, 500); 
    } 
}); 

CSS：

div { width: 20px; height: 20px; background: green; margin: 10px; } 

はそれがお役に立てば幸いです。）

http://jsfiddle.net/schadeck/ptGws/

Answer 2

イベントリスナーをリンクに追加してから、tranform: translateX(20px) CSSルールを使用して要素を移動できます。 translateXは、要素が現在ページにある場所から移動します。

var bird = document.getElementById("img"); 
 
var link = document.getElementById("link"); 
 
link.addEventListener("click", move); 
 

 
var birdX = 0; 
 
function move(e) { 
 
    birdX += 20; 
 
    bird.style.position = "relative"; 
 
    bird.style.transform = "translateX(" + birdX + "px)"; 
 
    e.preventDefault();  //prevents the page from redirecting 
 
}

div{ /*just for effect*/ 
 
    border:1px solid brown; 
 
    display:inline-block; 
 
} 
 
a{ 
 
    cursor:pointer; 
 
    text-decoration:underline; 
 
}

<div id="img">bird</div> 
 
<br> 
 
<a id="link">Link</a>

Answer 3

function move(e) { 
    var left = parseInt(bird.style.left); 

    bird.style.position = "relative"; 
    bird.style.left = (left+20)+"px"; 
    e.preventDefault();  //prevents the page from redirecting 
} 

これはあなたの元のコードに近いですが、私はそれほどそれを好きではありません。私はもっ​​と好きなものを好むでしょう：

var offsetLeft = 0; 

function move(e) { 
    offsetLeft += 20; 

    bird.style.position = "relative"; 
    bird.style.left = (offsetLeft)+"px"; 
    e.preventDefault();  //prevents the page from redirecting 
} 

しかし、それは余分な変数を作成します、どのような世界！

Answer 4

bird.style.left += "20px"はあなたが次のクリックで文字列—を構築しているので、leftプロパティは20px20pxになります一度動作しますが、それは有効なCSSではありません。

あなたの友人が解析することが意味することは、「位置の値を整数に変換し、20を加えて、それを追加するのではなくleftプロパティに設定する」です。これはpraguanの答えですが、—のように見えますが、jQueryを使用していない場合は、探しているものと異なる場合があります。 （誰もがそうではありません。それが行うことができるかを示す

<img id="bird" src="http://placehold.it/150" /> 
<br /> 
<a id="move-link" href="#">move the image</a> 

var bird = document.getElementById('bird'); 
var moveLink = document.getElementById('move-link'); 
var position = 0; 

bird.style.position = 'relative'; 

moveLink.onclick = function() { 
    position += 20; 
    bird.style.left = position + 'px'; 
} 

Here's a JSfiddle：）

私たちは構文解析なしで行うと、代わりに位置を追跡するために別の変数を使用できると思います。