Question

我想在两个图像之间切换，一个是“edit.png”，另一个是“ok.png”，当页面加载时，它应该显示“edit.png”，当我们点击edit.png时，它应该变为ok。 PNG。我已尝试使用以下java脚本代码，但此代码仅适用于我的表中的第一个edit.png图像，它不适用于next edit.png图像。任何人都建议我如何将这个java脚本代码应用于我的表中的每个edit.png图像。对于表格，我使用了“tabledit”插件。 screen shot my web page

var toggle = false;
function changing() {
    if (toggle === true) {
        document.getElementById('edit').src  = '/concrete5/application/images/animated/btn_edit.png';
    } else {
       document.getElementById('edit').src = '/concrete5/application/images/animated/btn_ok.png';
 
    }
    toggle = !toggle; 
}

<img src="/concrete5/application/images/animated/btn_edit.png" id="edit" onclick="changing()"/>

Answer 1

我会亲自显示两个图像，并切换可见性而不是网址：

＆＃13;

time_to_send_through_game_center

＆＃13;

var toggle = true;
function changing() {
  document.getElementById('edit').style.display = toggle ? 'none' : 'block';
  document.getElementById('ok').style.display = toggle ? 'block' : 'none';
  toggle = !toggle; 
}

＆＃13;

但是如果你真的想要它，你可以使用Ajax加载图像。这将涉及更多的工作。在这种情况下我会使用jquery implementation of ajax。

There is an ajax answer here.

Answer 2

最简单的方法是加载两个图像，并使用Jquery .toggle()切换 display = none 样式属性。

function changing() {
  $('#edit').toggle();
  $('#ok').toggle();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img src="http://placehold.it/300x300" id="edit" onclick="changing()"/>
<img style="display:none;" src="http://placehold.it/200x200" id="ok" onclick="changing()"/>

Answer 3

您的功能仅更新表格中第一张图片的原因是因为getElementById('edit')定位了id='edit'的DOM上的第一张图片。

ID应该是唯一的，因此每张图片都应该有唯一的ID。

一种方法是让changing()函数接受imageId的参数：

var toggle = false;
function changing(imageId) {
    if (toggle === true) {
        document.getElementById(imageId).src  = '/concrete5/application/images/animated/btn_edit.png';
    } else {
       document.getElementById(imageId).src = '/concrete5/application/images/animated/btn_ok.png';

    }
    toggle = !toggle; 
}

并传递imageId代码中的<img>参数：

<img src="/concrete5/application/images/animated/btn_edit.png" id="edit-row-1" onclick="changing('edit-row-1')"/>

请记住，您必须确保每个图片代码都包含其自己的唯一ID。因此，每行上的图像都会看起来像这样：

<!-- row 1 -->
<img src="/concrete5/application/images/animated/btn_edit.png" id="edit-row-1" onclick="changing('edit-row-1')"/>

<!-- row 2 -->
<img src="/concrete5/application/images/animated/btn_edit.png" id="edit-row-2" onclick="changing('edit-row-2')"/>

<!-- row 3 -->
<img src="/concrete5/application/images/animated/btn_edit.png" id="edit-row-3" onclick="changing('edit-row-3')"/>

在两个图像源之间切换

3 个答案: