Question

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

然而，当我添加第二段JavaScript代码时，它会破坏页面。即使我尝试将（var）代码修改为前一个脚本中唯一的

老实说，我不太了解JavaScript正在做什么，这就是为什么我可能无法通过谷歌解决这个问题的原因。如果您可以尝试详细解释我需要做什么，并解释任何有助于我进一步发展的具体条款，那么任何帮助都将不胜感激。

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

＆＃13;

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+"%"; }
}

＆＃13;

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; 
}

＆＃13;

<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>

＆＃13;

Answer 1

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

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

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

Answer 2

以下是您使用JavaScript编写的内容。

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

所有这一切都是同步完成的，就像我在这里列出的一样。因此，当事件在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

Howard的解决方案可行，但可以进一步改进以消除重复。

使用类而不是ID
在div中找到接收mousemove的元素，而不是在
不要复制CSS

＆＃13;

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]);
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

使用两个相同的javascripts

3 个答案: