使用兩個相同的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>