Использование двух одинаковых javascripts

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) 
 
{ 
 
\t var rect = inked.getBoundingClientRect(); 
 
\t var position = ((e.pageX - rect.left)/inked.offsetWidth)*100; 
 
\t 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) 
 
{ 
 
\t var rect1 = inked.getBoundingClientRect(); 
 
\t var position1 = ((e1.pageX - rect1.left)/inked1.offsetWidth)*100; 
 
\t 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

Решение Говарда работает, но его можно улучшить еще больше, чтобы удалить дублирование.

• Используйте классы вместо Идентификаторы
• Найти элементы внутри DIV, который получает MouseMove вместо передачи их в
• Не дублировать 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>

Answer 2

Во-первых, Java = JavaScript!. Это два совершенно разных языка.

Во-вторых, ваша проблема заключается в том, что ваша вторая функция называется той же, что и ваша первая функция. Второй по существу перезаписывает первый, поэтому первый больше не существует. Просто используйте другое имя для своей второй функции, и ваш код работает нормально.

Однако было бы лучше найти способ повторного использования вашей первой функции вместо двух почти идентичных функций.

Answer 3

Вот что вы делаете со своим JavaScript, как это написано в настоящее время.

1. декларировать и назначить переменные inkbox, ColorBox, fillerImage
2. Добавить обработчики событий
3. Создать функцию в глобальном масштабе по имени trackLocation
4. Declare и назначить переменные inkbox1, colorbox1, fillerImage1
5. Добавить обработчики событий
6. Перезаписать функцию 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); });