在两个图像源之间切换

我想在两个图像之间切换，一个是“edit.png”，另一个是“ok.png”，当页面加载时应显示“edit.png”，当我们点击edit.png时应改为ok.png。我曾尝试使用以下java脚本代码，但此代码仅应用于表格中的第一个edit.png图像，它不适用于下一个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()"/>

来源

2017-01-07 praveenkumar beedanal

它只加载一个的原因是因为src只是在页面加载/刷新时加载图像。在初始加载之后，您应该使用另一种加载图像的方式，如AJAX。 –

或者您也可以将它们都加载到隐藏的div上，并根据需要切换（显示/隐藏）它们。 –

你是否意识到你只能拥有一个带有ID的元素？ – epascarello

我会亲自显示两个图像，并切换的知名度，而不是网址：

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

<img src="http://placehold.it/300x300" onclick="changing()" id="edit"/> 
 
<img src="http://placehold.it/200x200" onclick="changing()" id="ok" style="display:none">

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

There is an ajax answer here.

来源

2017-01-07 15:11:44 Randy

- 我在这里通过JavaScript文件中的“tabledit”插件添加图片，因此它仅适用于第一张图片。请澄清。 –

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

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()"/>

来源

2017-01-07 15:15:17

JQuery不是原始问题和不必要的部分 – Randy

如果OP不想使用Jquery，那么它可以使用你的答案。我只是给他可能性。 –

的原因，您的功能只在您的表更新第一图像是因为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; 
}

从你<img>标签通过在imageId参数：

<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')"/>

来源

2017-01-07 15:21:21 richardgirges

不，我在这里动态添加行，以便它如何工作。 –

您的''标签中的ID也可以动态定义。你用什么方法动态添加行？ – richardgirges

在两个图像源之间切换

回答

相关问题