Javascript 使用按钮移动图像

我目前正在做一个项目，需要有一个图像，是移动到屏幕的每个角落，通过使用按钮相对于每个角落。图像从左上角（西北角）开始，然后单击东北角按钮，图像移动到右上角等。我似乎无法使图像移动，即使我通过在按钮中添加警报来确认其工作。有文本显示在图像上，我也需要随图像一起移动，但我现在只专注于让图像移动。任何帮助都将不胜感激

HTML:

---

下面是一个JS小提琴与工作版本：

---

根据您对其他职位的喜好更改jQuery代码。

谢谢您的指导。我终于做到了：

$(document).ready(function(){
    var img = $('#MyImage');
    $('#NWest').on('click',function(){
    img.css({top: '0px', left: '0px', position:'absolute'});
  });
});

$(document).ready(function(){
    var text = $('#MyText');
    $('#NWest').on('click',function(){
    text.css({top: '150px', left: '245px', position:'absolute'});
  });
});


$(document).ready(function(){
    var img = $('#MyImage');
    $('#NEast').on('click',function(){
    img.css({top: '0px', left: '75%', position:'absolute'});
  });
});

$(document).ready(function(){
    var text = $('#MyText');
    $('#NEast').on('click',function(){
    text.css({top: '150px', left: '88%', position:'absolute'});
  });
});


$(document).ready(function(){
    var img = $('#MyImage');
    $('#SEast').on('click',function(){
    img.css({top: '560px', left: '75%', position:'absolute'});
  });
});

$(document).ready(function(){
    var text = $('#MyText');
    $('#SEast').on('click',function(){
    text.css({top: '710px', left: '88%', position:'absolute'});
  });
});

$(document).ready(function(){
    var img = $('#MyImage');
    $('#SWest').on('click',function(){
    img.css({top: '560px', left: '0px', position:'absolute'});
  });
});

$(document).ready(function(){
    var text = $('#MyText');
    $('#SWest').on('click',function(){
    text.css({top: '710px', left: '245px', position:'absolute'});
  });
});

这很有效。但是我在jquery方面没有任何经验，因为我对html还是很陌生。我知道jquery是一种更新得多的方法，但是如何使我的原始代码工作呢。我想在传过去之前先了解一下

function NWfunction(){
document.getElementById("MyImage").style.top="150px";
document.getElementById("MyImage").style.left="210px";
}

function NEfunction(){
document.getElementById("MyImage").style.top="150px";
document.getElementById("MyImage").style.left="1500px";
}

function SEfunction(){
document.getElementById("MyImage").style.top="1500px";
document.getElementById("MyImage").style.left="1500px";
}

function SWfunction(){
document.getElementById("MyImage").style.top="1500px";
document.getElementById("MyImage").style.left="210px";
}

$(document).ready(function(){
    var img = $('#image');
    $('#neast').on('click',function(){
    img.css('right','0');
  });
});

$(document).ready(function(){
    var img = $('#MyImage');
    $('#NWest').on('click',function(){
    img.css({top: '0px', left: '0px', position:'absolute'});
  });
});

$(document).ready(function(){
    var text = $('#MyText');
    $('#NWest').on('click',function(){
    text.css({top: '150px', left: '245px', position:'absolute'});
  });
});


$(document).ready(function(){
    var img = $('#MyImage');
    $('#NEast').on('click',function(){
    img.css({top: '0px', left: '75%', position:'absolute'});
  });
});

$(document).ready(function(){
    var text = $('#MyText');
    $('#NEast').on('click',function(){
    text.css({top: '150px', left: '88%', position:'absolute'});
  });
});


$(document).ready(function(){
    var img = $('#MyImage');
    $('#SEast').on('click',function(){
    img.css({top: '560px', left: '75%', position:'absolute'});
  });
});

$(document).ready(function(){
    var text = $('#MyText');
    $('#SEast').on('click',function(){
    text.css({top: '710px', left: '88%', position:'absolute'});
  });
});

$(document).ready(function(){
    var img = $('#MyImage');
    $('#SWest').on('click',function(){
    img.css({top: '560px', left: '0px', position:'absolute'});
  });
});

$(document).ready(function(){
    var text = $('#MyText');
    $('#SWest').on('click',function(){
    text.css({top: '710px', left: '245px', position:'absolute'});
  });
});