Как передать аргумент в функцию для this.setattribute? - PullRequest
Новая
       6

Как передать аргумент в функцию для this.setattribute?

0 голосов
/ 07 октября 2018

, поэтому я изучаю javascript (?), И я столкнулся с этой ситуацией, я не могу найти прямой ответ.

, поэтому у меня есть эти абзацы на html-странице, которые я хочу изменить цвет фонаи код, который у меня работает, таков: 

var colors=['red','pink','blue'];

var div2paragraphs = document.querySelectorAll('#div2 p')

for (let paragraph = 0; paragraph < div2paragraphs.length; paragraph++) {
    (function(paragraph) {
    div2paragraphs[paragraph].onmouseover = function(){
    this.setAttribute('style', `background-color: ${colors[paragraph]}`)}
    div2paragraphs[paragraph].onmouseout = function(){
    this.setAttribute('style', 'background-color: white')}
    })(paragraph);
}

Я тоже не совсем понимаю, что здесь происходит, я просто пытался сделать это с помощью всей функции "function () {}"вещь (предположительно называемая анонимной функцией?), но очевидно, что в javascript есть нечто, называемое IIFE, поэтому вам нужно WRAP функцию и передать уникальную переменную, чтобы она запускалась каждый раз внутри цикла, хотя я до сих пор не понимаюпочему я должен закончить это с "(параграф)".

Я думал, можно ли сделать то же самое, просто создав функцию для каждого из этих действий setAttribute, поэтому я попытался написать это такпуть: 

var colors=['red','pink','blue'];

var div2paragraphs = document.querySelectorAll('#div2 p')

function changeToColor(color) {
    this.setAttribute('style', 'background-color: ' + color);
}

function changeBackWhite() {
    this.setAttribute('style', 'background-color: white');
}

for (let paragraph = 0; paragraph < div2paragraphs.length; paragraph++) {
    div2paragraphs[paragraph].onmouseover = changeToColor('red');
    div2paragraphs[paragraph].onmouseout = changeBackWhite;
}

но что бы я ни делал, всегда возникает ошибка: 

Uncaught TypeError: this.setAttribute is not a function

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

Я больше привык к Python, поэтому очевидно, что есть фундаментальные концепции, которые отличаются ...

PS: в чем разницамежду этими двумя примерами ниже? 

for (let paragraph = 0; paragraph < div2paragraphs.length; paragraph++) {
    div2paragraphs[paragraph].onmouseover = function() {
        this.style['background-color'] = colors[paragraph];
    }
    div2paragraphs[paragraph].onmouseout = function() {
        this.style['background-color'] = 'white';
    }
}

и этим 

for (let paragraph = 0; paragraph < div2paragraphs.length; paragraph++) {
    div2paragraphs[paragraph].onmouseover = function(){
        this.setAttribute('style', `background-color: $(colors[paragraph]`)
    }
    div2paragraphs[paragraph].onmouseout = function(){
        this.setAttribute('style', 'background-color: white')
    }
}

и почему первый (предоставленный ibrahim mahrir) работает, а второй нет?

Ответы [ 2 ]

0 голосов
/ 07 октября 2018

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers

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

div2paragraphs[paragraph].onmouseover = changeToColor('red');

Здесь происходит TypeError.Результат (возвращаемое значение) вызванной функции changeToColor с параметром "red" является переменной.Это не функция.Назначенные обработчики должны соответствовать прототипу function(Event e){...}, где e - это объект класса Event, как определено в https://developer.mozilla.org/en-US/docs/Web/API/Event

div2paragraphs[paragraph].onmouseout = changeBackWhite;

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

Вам нужно переписать функцию changeToColor и назначить ее идентификатор для placeholer 

div2paragraphs[paragraph].onmouseover = changeToColor

Или, если вы хотите немедленно вызвать функцию, вы можете заключить ее в другую функцию, имеющую this ссылку на контекст, к которому она принадлежит (если вызывающая функция нуждалась this), используя либо callили apply. 

div2paragraphs[paragraph].onmouseover = function () {
  changeToColor.call(this, 'red');
}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

0 голосов
/ 07 октября 2018

В первом примере кода IIFE внутри цикла совершенно бесполезен, поскольку вы уже используете let, который учитывает область видимости блока, поэтому этой проблемы не произойдет,Следующий код будет работать нормально: 

for (let paragraph = 0; paragraph < div2paragraphs.length; paragraph++) {
    div2paragraphs[paragraph].onmouseover = function() {
        this.style['background-color'] = colors[paragraph];
    };
    div2paragraphs[paragraph].onmouseout = function() {
        this.style['background-color'] = 'white';
    };
}

Примечание: Вам не нужно использовать setAttribute для установки свойств style.Просто сделайте это напрямую.

Демо: 

var colors=['red','pink','blue'];

var div2paragraphs = document.querySelectorAll('#div2 p');

for (let paragraph = 0; paragraph < div2paragraphs.length; paragraph++) {
    div2paragraphs[paragraph].onmouseover = function() {
        this.style['background-color'] = colors[paragraph];
    };
    div2paragraphs[paragraph].onmouseout = function() {
        this.style['background-color'] = 'white';
    };
}
<div id="div2">
    <p>AAAA</p>
    <p>BBBB</p>
    <p>CCCC</p>
</div>

Что касается второго примера кода, ваши функции должны возвращать другие функции, которые будут назначены в качестве прослушивателей событий.Например, changeColor должно быть определено так: 

function changeToColor(color) {
    return function() {
        this.style['background-color'] = color;
    }
}

Анонимная функция, возвращаемая changeColor, будет назначена для прослушивателя событий.В вашем коде changeColor ничего не возвращено, поэтому undefined присоединен к слушателю событий.Более того, changeColor не является самим прослушивателем событий (это просто функция, которая создает прослушиватель событий и возвращает его), поэтому this внутри него будет глобальным объектом window.window нет метода с именем setAttribute, отсюда и ошибка.

Кроме того, вам не нужно changeBackWhite, вы можете использовать changeColor для обоих (из-за замыканий), вот так: 

for (let paragraph = 0; paragraph < div2paragraphs.length; paragraph++) {
    div2paragraphs[paragraph].onmouseover = changeToColor(colors[paragraph]);
    div2paragraphs[paragraph].onmouseout = changeToColor('white');;
}

Демонстрация: 

var colors=['red','pink','blue'];

var div2paragraphs = document.querySelectorAll('#div2 p');

function changeToColor(color) {
    return function() {
        this.style['background-color'] = color;
    }
}

for (let paragraph = 0; paragraph < div2paragraphs.length; paragraph++) {
    div2paragraphs[paragraph].onmouseover = changeToColor(colors[paragraph]);
    div2paragraphs[paragraph].onmouseout = changeToColor('white');;
}
<div id="div2">
    <p>AAAA</p>
    <p>BBBB</p>
    <p>CCCC</p>
</div>
...