JS: добавить стиль загрузки, затем удалить стиль с помощью Javascript - PullRequest
Новая
       18

JS: добавить стиль загрузки, затем удалить стиль с помощью Javascript

0 голосов
/ 20 ноября 2018

Я очень новичок и неопытен в JavaScript, поэтому прошу прощения за глупый вопрос!

Я пытаюсь добавить оранжевую тень к раскрывающемуся списку (варианты доставки) на странице экспресс-проверки Magento PayPal со следующим сценарием, чтобы подчеркнуть, что клиент должен сделать выбор варианта доставки: 

window.onload = function() {
if (window.location.href.indexOf('/paypal/express/review/')!= -1) {
document.querySelectorAll('select#shipping_method')[0].style.boxShadow = '0 0 4px 2px #e15500'; 
}
};

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

document.querySelectorAll('select#shipping_method').onclick = function()  { 
if (window.location.href.indexOf('/paypal/express/review/')!= -1) 
{this.style.boxShadow = 'none'; }
};

Вопрос в том, как объединить эти две функции, чтобы они работали? (добавьте тень при загрузке, затем удалите тень по щелчку) Я смог сделать тень загруженной, но не могу заставить обе функции работать вместе из-за моего отсутствия знаний Javascript на сегодняшний день! Будем благодарны за любые идеи. Обратите внимание, что я не могу редактировать исходный HTML-код и хочу убедиться, что он работает только на этой конкретной странице.

1 Ответ

0 голосов
/ 20 ноября 2018

Что по этому поводу: 

if (window.location.href.indexOf('/paypal/express/review/')!= -1) {
  const select = document.querySelector('#shipping_method');

  window.addEventListener('load', function() {
    select.style.boxShadow = '0 0 4px 2px #e15500'; 
  })

  select.addEventListener('click', function() {
    this.style.boxShadow = 'none';
  })
}
  1. Вы делаете этот код только в том случае, если URL-адрес совпадает, поэтому вам не нужно проверять это дважды
  2. Определите раскрывающийся список, чтобы вы могли повторно использовать селектор
  3. лучше использовать addEventListener

Дайте знать mw, работает ли он для вас.

Удачи.

...