javascript - 使用两个相同的 JavaScript

Question

我一直在尝试创建一个包含多个前后图像的页面(使用 slider 在两者之间交换)。

但是，当我添加第二段 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

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

• 使用类而不是 Id
• 查找正在接收 mousemove 的 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>