Javascript。 OnClick图片src +1

Question

This is my code: 这是我的代码：

<img name="changer1" alt="before" src="img/.../1/before.jpg"/>
<img name="changer2" alt="after" src="img/.../1/after.jpg"/>

<img src="img/next.png" onclick="changer1.src='img/.../2/before.jpg'; changer2.src='img/.../2/after.jpg'"/>

So when I click on the "next.png" image, both pictures change to the pictures in the new folder. 因此，当我单击“ next.png”图像时，两张图片都将更改为新文件夹中的图片。 This works perfect. 这完美。 But what I want is, when I click on the "next.png" image, the src code automatic change. 但是我想要的是，当我单击“ next.png”图像时，src代码会自动更改。 So when I click it looks like: 因此，当我单击它时，它看起来像：

<img src="img/next.png" onclick="changer1.src='img/.../3/before.jpg'; changer2.src='img/.../3/after.jpg'"/>

When i click again it looks like: 当我再次单击时，它看起来像：

<img src="img/next.png" onclick="changer1.src='img/.../4/before.jpg'; changer2.src='img/.../4/after.jpg'"/>

So the folder allways move +1. 因此，文件夹始终移动+1。 From 2 to 3. From 3 to 4... 从2到3。从3到4 ...

I hope you know what I mean and help me :) 我希望你知道我的意思并帮助我:)

And sorry for my bad english. 对不起，我的英语不好。

Answer 1

You can change it with basic DOM methods in Javascript. 您可以使用Javascript中的基本DOM方法进行更改。 Firstly I should point out 'name' is a depreciated attribute, HTML 5 uses the 'id' attribute instead. 首先，我应该指出'name'是已贬值的属性，HTML 5则使用了'id'属性。

Anyway firstly we need to add some labels to the img's so we can find them in JS 无论如何，首先我们需要在img上添加一些标签，以便我们可以在JS中找到它们

<img id="changer1" alt="before" src="img/.../1/before.jpg"/>
<img id="changer2" alt="after" src="img/.../1/after.jpg"/>

I just used your existing name attributes. 我只是使用您现有的名称属性。 Figured that was why you'd included them anyway! 弄明白了，这就是为什么要包括它们的原因！ Then we add a JS function to attach to the on click listener. 然后，我们添加一个JS函数以附加到on click监听器上。

<script>
var pictureID = 1;
function moveToNextImage(){
    pictureID++;
    var string = 'img/.../'+pictureID;
    document.getElementById('changer1').src = string + '/before.jpg';
    document.getElementById('changer2').src = string + '/after.jpg;
}
</script>

This script keeps a counter for the folder value and uses that to generate a new source string to replace the old one with. 该脚本为文件夹值保留一个计数器，并使用该计数器生成新的源字符串以替换旧的源字符串。 The function adds 1 to the counter then changes the src attribute on the 2 elements to the new one. 该函数将1加到计数器，然后将2个元素上的src属性更改为新元素。

Your next button should look like this to use the function instead. 您的下一个按钮应该看起来像这样来代替使用该功能。

<img src="img/next.png" onclick="moveToNextImage()"/>

Answer 2

Okey so my problem now is I have this script allready installed for those 2 images Okey，所以我现在的问题是我已经为这2个映像安装了该脚本

So my full script is this: 所以我的完整脚本是这样的：

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.beforeafter-1.4.js"></script>
<script type="text/javascript">
$(function(){
    $('#container').beforeAfter();
});
</script>

<div id="container">
 <div><img id="changer1" alt="before" src="http://www11.pic-upload.de/12.09.14/oha2eiilhnay.jpg"/></div>
 <div><img id="changer2" alt="after" src="http://www11.pic-upload.de/12.09.14/gdbsfgzsh2f.jpg"/></div>
</div>

I hope you know what my problem is... 我希望你知道我的问题是...

When I remove the "container" ID from the div, the script from Raj works perfekt. 当我从div中删除“容器” ID时，Raj中的脚本有效。 But not my time comparison script, you find in the 1 link. 但不是我的时间比较脚本，您可以在1链接中找到。

Answer 3

<!DOCTYPE html>
<html>
<body>
<img name="changer1" id="changer1" alt="before" src="img/.../1/before.jpg"/>
<img name="changer2" id="changer2" alt="after" src="img/.../1/after.jpg"/>

<img src="img/next.png" id="test"/>
</body>
<script src="jquery.js"></script>
<script>

$(document).ready(function(){
    var i = 2;
    $("#test").click(function(){
        var srcbefore='img/.../'+i+'/before.jpg';
        var srcAfter="img/.../"+i+"/after.jpg";
        $("#changer1").attr("src",srcbefore);
        $("#changer2").attr("src",srcAfter);
        console.log(srcbefore+"::"+srcAfter);
        i++;
    });
});

</script>
</html>

hope this solves your problem.. FYI - Dont couple your JS code in HTML. 希望这能解决您的问题。仅供参考-不要将您的JS代码耦合为HTML。 Make it seperate. 使它分开。 Use Class or ID instead of name. 使用类或ID代替名称。

Javascript。 OnClick图片src +1

问题描述

3 个解决方案

解决方案1
0 2014-09-12 16:06:29

解决方案2
0 2014-09-12 17:16:14

解决方案3
-1 2014-09-12 16:09:21

Javascript。 OnClick图片src +1

问题描述

3 个解决方案

解决方案1 0 2014-09-12 16:06:29

解决方案2 0 2014-09-12 17:16:14

解决方案3 -1 2014-09-12 16:09:21

解决方案1
0 2014-09-12 16:06:29

解决方案2
0 2014-09-12 17:16:14

解决方案3
-1 2014-09-12 16:09:21