Question

好的，我是JavaScript的新手，所以请在回答时牢记这一点。我正在寻找的是一个我可以使用的功能，它可以让我点击一个图像，然后点击另一个图像并在页面上交换他们的位置。例如，我有一个3x4表，有12个单独的图像，我点击'image1'，然后点击'image3'和两个交换。我发现的唯一解决方案是处理用指定图像交换图像，这不是我需要的。希望这是有道理的。

欢迎任何建议和解决方案帮助我学习！谢谢！另外，我希望这是100％JavaScript而不是jQuery。

HTML：

<table>
<tr>
    <th id="pos1"> <img src="pic_01.gif" id="pic1" onclick="imageSwap()" alt="" border=       height=100 width=100></img> </th>
    <td id="pos2"> <img src="pic_02.gif" id="pic2" alt="" border= height=100 width=100>     </img></td>
    <td id="pos3"> <img src="pic_03.gif" alt="" border= height=100 width=100></img></td>
</tr>

尝试JS：

imgArray[0] = new Image();
imgArray[0].src = 'pic_01.gif';

imgArray[1] = new Image();
imgArray[1].src = 'pic_02.gif';

imgArray[2] = new Image();
imgArray[2].src = 'pic_03.gif';

etc etc...

var a
var b
function imageSwap(){
 getElementById.src = a

根本不确定如何为交换本身做什么

Answer 1

所以我很无聊，觉得自己很好，所以这里有一个image swapping的例子，即使你没有尝试过。尽量避免被可爱的小猫分心。

重要的代码部分是脚本：

var position = null,
target = null;

$("img").click(function(){
    if ($(this).attr("class") == "border"){
        $(this).toggleClass("border");
        target = null;
        position = null;
        return false;
    }
    else{
        $(this).toggleClass("border");
        if (position == null){
            position = $(this).attr("src");
            $(this).toggleClass("position");
        }
        else{
            target = $(this).attr("src");
            $(this).attr("src", position);
            $(".position").attr("src", target)
                .toggleClass("position");
            $(".border").toggleClass("border");
            position = null;
            target = null;
        }
    }
})

<html>只是一组图像，CSS只会为您单击的图像添加一些边距和边框。简而言之，代码检查图像是否已被选中。如果它已有选区边框并再次单击它，则会取消选择图像。如果未选择单击的图像，则会检查是否已设置位置。如果已设置位置，则会将之前单击的图像与目标（刚刚单击的图像）进行交换。否则，它会将单击的图像设置为位置（然后下一次单击将导致图像交换）。

通用图像交换功能

1 个答案: