Javascript, Sytax возвращает два разных значения?

Выведите изображение мышь парит на, очищая <ul> Но когда я хранить srcатрибут из <img> в переменной возвращает два различных src. Как ГКЗ изображений, в точке и видоизмененный по подстрокам Например:Javascript, Sytax возвращает два разных значения?

//images/Hassum_Harrod_03.jpg
//images/Hassum_Harrod.jpg

Я хочу, чтобы только один выход не два, почему это происходит, объясните причину.

Примечание

Если <img src="images/Hassum_Harrod_03_tn.jpg" />ПИКТОГРАММАХ
Если <img src="images/Hassum_Harrod_03" />ПОЛНЫЙ IMAGE

HTML КОД

<body> 
    <div id="art"> 
    <h2>Art Preview</h2> 
    <p>Mouse over the following pieces of art to preview a large version</p> 
    <ul class="grid"> 
     <li><img src="images/Hassum_Harrod_03_tn.jpg" alt="Hassum Harod's Summer Trees"></li> 
     <li><img src="images/LaVonne_LaRue_02_tn.jpg" alt="LaVonne_LaRue's Mighty Duck"></li> 
     <li><img src="images/Lorenzo_Garcia_01_tn.jpg" alt="Lorenzo Garcia's The Dancer"></li> 
          <--FEW OTHER <li>'s--> 
    </div> 
    <script src="script.js"></script> 
</body>

Javascript

document.querySelector('.grid').addEventListener('mouseover', function(e) { 
    if (e.target.tagName === 'IMG') { 

    ulNode = e.target.parentNode.parentNode; 

    var getAtt = e.target.getAttribute('src'); 
    var imgLoc = getAtt.substring(0,getAtt.length-7)+".jpg"; 
    console.log(imgLoc); //images/Hassum_Harrod_03.jpg 
         //images/Hassum_Harrod.jpg 


    var createElement = document.createElement("img"); 
    createElement.setAttribute("src",imgLoc); 
    ulNode.innerHTML=""; 
    ulNode.appendChild(createElement); 

    } // check to see that I clicked on IMG only 
}, false); // click event

источник

2015-06-03 CoDINGinDARK

Можете ли вы создать скрипку, нажав кнопку «Код фрагмента» или нажав «Ctrl + M»? –

Попробуйте выполнить регистрацию переменной 'getAtt'. 'getAtt.substring (0, getAtt.length-7)' будет возвращать '// images/Hassum_Harrod' с отсутствующим' _03.jpg' – Justinas

Хорошо ... Gimme a sec ... –

Первый раз, когда вы наведите курсор мыши на "Hassum_Harrod_03_tn.jpg", код:

getAtt.substring(0,getAtt.length-7)+".jpg"

должен вернуть "изображения/Hassum_Harrod_03.jpg".Однако, когда он работает в:

var createElement = document.createElement("img"); 
createElement.setAttribute("src",getAtt + ".jpg"); 
ulNode.innerHTML=""; 
ulNode.appendChild(createElement);

DOM-был сломан теперь, как элемент «уль» не содержит «Ли» на всех, а «IMG» в нем.

Обратите внимание, что привязка «наводка» по-прежнему работает, поскольку «ul» все еще существует.

Тогда второе наведение на «Hassum_Harrod_03.jpg» получит «Hassum_Harrod.jpg», а «ulNode» в вашем коде больше не является «ul», а верхним «div». И привязка «mouseover» завершается неудачей, поскольку нет «ul».

источник

2015-06-03 12:50:11

есть 'ul' , потому что 'ulNode.innerHTML' установлен в пустую? – CoDINGinDARK

DOM сломался, поскольку« ul »ожидает« li »как своих дочерних узлов. Но в вашем случае 2 раза вычисления изображения src приводят к разным« imgLoc », Так что лучше проверить, что img src был настоящим миниатюром, например var isThumbnail = getAtt.indexOf ("_ tn ")! == -1; if (isThumbnail) {var imgLoc = getAtt.substring (0, getAtt.length-7) + ". jpg"; ...} –

Я думаю, что это будет работать!

document.querySelector('.grid').addEventListener('mouseover', function(e) { 
 
    if (e.target.tagName === 'IMG') { 
 

 
    ulNode = e.target.parentNode.parentNode; 
 

 
    var getAtt = e.target.getAttribute('src'); 
 
    var imgLoc = getAtt.substring(0,getAtt.length-7)+".jpg"; 
 
    console.log(imgLoc); //images/Hassum_Harrod_03.jpg 
 
         //images/Hassum_Harrod.jpg 
 

 

 
    var createElement = document.createElement("img"); 
 
    createElement.setAttribute("src",getAtt + ".jpg"); 
 
    ulNode.innerHTML=""; 
 
    ulNode.appendChild(createElement); 
 

 
    } // check to see that I clicked on IMG only 
 
}, false); // click event

<div id="art"> 
 
    <h2>Art Preview</h2> 
 
    <p>Mouse over the following pieces of art to preview a large version</p> 
 
    <ul class="grid"> 
 
    <li><img src="images/Hassum_Harrod_03_tn.jpg" alt="Hassum Harod's Summer Trees" /></li> 
 
    <li><img src="images/LaVonne_LaRue_02_tn.jpg" alt="LaVonne_LaRue's Mighty Duck" /></li> 
 
    <li><img src="images/Lorenzo_Garcia_01_tn.jpg" alt="Lorenzo Garcia's The Dancer" /></li> 
 
    </ul> 
 
</div>

Причина заключается в том, то onMouseOver событие связывает изображение, изменяя его до полной версии. Вот почему вы так поняли.

источник

2015-06-03 12:06:55

Вы сталкиваетесь с этой проблемой, потому что вы являетесь обязательным событием mouseover для всех элементов img (тот, который вы создали динамически), просто проверьте, что имя класса в функции mouseover будет работать, я думаю.

document.querySelector('.grid').addEventListener('mouseover', function(e) { 
    if (e.target.tagName === 'IMG') { 

    ulNode = e.target.parentNode.parentNode; 
     if(ulNode.className == 'grid'){ 

    var getAtt = e.target.getAttribute('src'); 
    var imgLoc = getAtt.substring(0,getAtt.length-7)+".jpg"; 
    alert(imgLoc); //images/Hassum_Harrod_03.jpg 
         //images/Hassum_Harrod.jpg 


    var createElement = document.createElement("img"); 
    createElement.setAttribute("src",imgLoc); 
    ulNode.innerHTML=""; 
    ulNode.appendChild(createElement); 
     } 
    } // check to see that I clicked on IMG only 
}, false); // click event

источник

2015-06-03 12:12:42

document.querySelector ('Сетка '). AddEventListener (' курсора, находящегося', функция (е) { если (e.target.tagName === 'IMG') {

ulNode = e.target.parentNode.parentNode; 
ulNode.innerHTML=""; 
var getAtt = e.target.getAttribute('src'); 
var imgLoc = getAtt.substring(0,getAtt.length-7)+".jpg"; 
console.log(imgLoc); //images/Hassum_Harrod_03.jpg 
        //images/Hassum_Harrod.jpg 


var createElement = document.createElement("img"); 
createElement.setAttribute("src",imgLoc); 

ulNode.appendChild(createElement);

} // проверяем, что я нажал только IMG }, false); // щелкните событие

источник

2015-06-03 12:16:32 Devjit

Переместите ulNode.innerHTML = ""; наверху – Devjit

Javascript, Sytax возвращает два разных значения?

ответ

Смежные вопросы