使用两个相同的JavaScript

Question

我一直在尝试创建一个包含多个前后图像的页面（使用滑块在两者之间进行交换）。

但是，当我添加第二段JavaScript代码时，它将中断页面。 即使我尝试将（var）代码修改为与先前脚本唯一的

老实说，我不太了解JavaScript在做什么，这就是为什么我可能无法使用Google解决方案的原因。 如果您可以尝试尽可能详细地解释我需要做的事情，并解释任何可以帮助我进一步发展的特定术语，我们将不胜感激。

您可以在链接上（和下面）看到我的所有代码： http : //codepen.io/sn0wm0nkey/pen/DakbA

 var inkbox = document.getElementById("inked-painted"); var colorbox = document.getElementById("colored"); var fillerImage = document.getElementById("inked"); inkbox.addEventListener("mousemove",trackLocation,false); inkbox.addEventListener("touchstart",trackLocation,false); inkbox.addEventListener("touchmove",trackLocation,false); function trackLocation(e) { var rect = inked.getBoundingClientRect(); var position = ((e.pageX - rect.left) / inked.offsetWidth)*100; if (position <= 100) { colorbox.style.width = position+"%"; } } /* -----second JavaScript code---- */ var inkbox1 = document.getElementById("inked1-painted"); var colorbox1 = document.getElementById("colored1"); var fillerImage1 = document.getElementById("inked1"); inkbox1.addEventListener("mousemove",trackLocation,false); inkbox1.addEventListener("touchstart",trackLocation,false); inkbox1.addEventListener("touchmove",trackLocation,false); function trackLocation(e1) { var rect1 = inked.getBoundingClientRect(); var position1 = ((e1.pageX - rect1.left) / inked1.offsetWidth)*100; if (position1 <= 100) { colorbox1.style.width = position1+"%"; } } 

 body { background: #113; } div#inked-painted { position: relative; font-size: 0; -ms-touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; } div#inked-painted img { width: 100%; height: auto; } div#colored { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/colored-panel.jpg); position: absolute; top: 0; left: 0; height: 100%; width: 50%; background-size: cover; } div#inked-painted:hover { cursor: col-resize; } /*-------- second css sheet --------- */ div#inked1-painted { position: relative; font-size: 0; -ms-touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; } div#inked1-painted img { width: 100%; height: auto; } div#colored1 { position: absolute; top: 0; left: 0; height: 100%; width: 50%; background-size: cover; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/colored-panel.jpg); } div#inked1-painted:hover { cursor: col-resize; } 

 <Div> <div id="inked-painted"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/inked-panel.png" id="inked" alt> <div id="colored"></div> </div> <p></p> <div> <div id="inked1-painted"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/inked-panel.png" id="inked1" alt> <div id="colored1"></div> </div> 

Answer 1

首先，Java！= JavaScript。 他们是两种截然不同的语言。

其次，您的问题是第二个函数的名称与第一个函数的名称相同。 第二个基本上覆盖了第一个，因此第一个不再存在。 只需为第二个函数使用一个不同的名称，您的代码就可以正常工作。

但是，最好找到一种方法来重用第一个函数，而不要使用两个几乎完全相同的函数。

Answer 2

这是您当前使用JavaScript编写的方式。

1. 声明并分配变量inkbox，colorbox，fillerImage
2. 添加事件处理程序
3. 通过trackLocation的名称在全局范围内创建一个函数
4. 声明并分配变量inkbox1，colorbox1，fillerImage1
5. 添加事件处理程序
6. 在全局范围内覆盖trackLocation函数

所有这些都是同步完成的，就像我在这里列出的一样。 因此，当事件在inkbox上inkbox ，它将调用覆盖原始函数的新函数。

我看到的另一个问题（除非您省略了一些代码）是您有一些未定义的变量，这将在函数中引起问题。

function trackLocation (e) {
    // inked is undefined
    var rect = inked.getBoundingClientRect();

    // inked is undefined
    var position = ((e.pageX - rect.left) / inked.offsetWidth)*100;

    if (position <= 100) { colorbox.style.width = position+"%"; }
}

您需要重写函数以接受局部变量，如下所示：

function trackLocation (e, inked, colorbox) {
    var rect = inked.getBoundingClientRect();
    var position = ((e.pageX - rect.left) / inked.offsetWidth)*100;
    if (position <= 100) { colorbox.style.width = position+"%"; }
}

现在，可以在所有事件处理程序中重用此功能，如下所示：

function trackLocation (e, inked, colorbox) {
    var rect = inked.getBoundingClientRect();
    var position = ((e.pageX - rect.left) / inked.offsetWidth)*100;
    if (position <= 100) { colorbox.style.width = position+"%"; }
}


var inkbox = document.getElementById("inked-painted");
var colorbox = document.getElementById("colored");
var fillerImage = document.getElementById("inked");
inkbox.addEventListener("mousemove", function (e) { trackLocation(e, inkbox, colorbox); });
inkbox.addEventListener("touchstart", function (e) { trackLocation(e, inkbox, colorbox); });
inkbox.addEventListener("touchmove", function (e) { trackLocation(e, inkbox, colorbox); });

var inkbox1 = document.getElementById("inked1-painted");
var colorbox1 = document.getElementById("colored1");
var fillerImage1 = document.getElementById("inked1");
inkbox1.addEventListener("mousemove", function (e) { trackLocation(e, inkbox1, colorbox1); });
inkbox1.addEventListener("touchstart", function (e) { trackLocation(e, inkbox1, colorbox1); });
inkbox1.addEventListener("touchmove", function (e) { trackLocation(e, inkbox1, colorbox1); });

Answer 3

霍华德的解决方案行之有效，但可以进一步改进以消除重复。

• 使用类而不是ID
• 在div中找到正在接受鼠标移动的元素，而不是将其传递
• 不要复制CSS

 function onMouseMove(e) { var inked = this.getElementsByTagName("img")[0]; var colorbox = this.querySelector('.colored'); var rect = inked.getBoundingClientRect(); var position = ((e.pageX - rect.left) / inked.offsetWidth) * 100; if (position <= 100) { colorbox.style.width = position + "%"; } } function trackLocation(el) { el.addEventListener("mousemove", onMouseMove, false); el.addEventListener("touchstart", onMouseMove, false); el.addEventListener("touchmove", onMouseMove, false); } var wrappers = document.querySelectorAll('.inked-painted'); for (var i = 0; i < wrappers.length; i++) { trackLocation(wrappers[i]); } 

 div.inked-painted { position: relative; font-size: 0; -ms-touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; } div.inked-painted img { width: 100%; height: auto; } .colored { background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/colored-panel.jpg); position: absolute; top: 0; left: 0; height: 100%; width: 50%; background-size: cover; } div.inked-painted:hover { cursor: col-resize; } 

 <div class="inked-painted"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/inked-panel.png" /> <div class="colored"></div> </div> <p></p> <div class="inked-painted"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/inked-panel.png" /> <div class="colored"></div> </div>