Question

好的，所以我有一个JavaScript函数可以交换两个图像的www.example.com/#/bar/1，这些图像交换图像本身没问题。但是，我有两个值需要与图像本身一起切换，以便我以后可以正确添加值。一个例子是，

所以，我想交换上面的值，以便第一张图像获得＆＃34; 2＆＃34;第二个是＆＃34;＆＃34;的值。有没有办法做到这一点？我一直试图找出一种方法，而且它不会点击。

以下是交换图像的功能：

$message = "Thank you for your interest. We will get back to you as soon as possible.<br />Sincerely,<br />(My Name)";
$subject = "Confirmation";

$headers2 = "From: $webMaster\r\n";
$headers2 .= "Content-type:  text/html\r\n";
mail($leademail, $subject, $message, $headers2);

Answer 1

您可以使用.value：

来实现这一目标

var img_1_value = document.getElementById("F").value;
var img_2_value = document.getElementById("4").value;

document.getElementById("F").value = img_2_value;
document.getElementById("4").value = img_1_value;

由于value不是img标记的有效属性，因此如果您可以使用数据属性（在下面的评论中建议），那就更好了：

<img src="ble.jpg" id="F" data-value="" onclick="swap(5)" />
<img src="ilk.jpg" id="4" data-value="2" onclick="swap(6)"/>

var img_1_value = document.getElementById("F").getAttribute('data-value');
var img_2_value = document.getElementById("4").getAttribute('data-value');

document.getElementById("F").setAttribute('data-value', img_2_value);
document.getElementById("4").setAttribute('data-value', img_1_value);

希望这有帮助。

Answer 2

你可以做得更简单，例如：

function swap(n, t){
  var img = document.images[parseInt(n)];
  var src = img.src;
  var val = img.getAttribute('value');
  img.src = t.src;
  img.setAttribute('value', t.getAttribute('value'));
  t.src = src;
  t.setAttribute('value', val);  
}

<img src="https://cdn3.iconfinder.com/data/icons/supermario/PNG/Paper-Mario.png" id="F" value="" onclick="swap(1, this)" />
<img src="https://cdn3.iconfinder.com/data/icons/supermario/PNG/Mushroom---Super.png" id="4" value="2" onclick="swap(0, this)" />
<img src="http://www.file-extensions.org/imgs/app-icon/128/5399/super-mario-bros-x-icon.png" value="asd" onclick="swap(3, this)" />
<img src="http://www.smflashback.ga/img/mario.png" value="qwe" onclick="swap(2, this)" />

请注意，我也将点击图片的引用传递给swap函数。

Javascript：如何交换两个图像的值？

2 个答案: