Question

我很新并且对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'; }
};

问题是，如何将这两个功能结合在一起才能起作用？（添加shadow onload，然后删除shadow onclick）我已经能够使shadow出现onload，但是由于到目前为止我缺乏Javascript知识，所以无法使这两个函数一起工作！任何想法将不胜感激-请注意，我无法编辑源HTML，并希望确保仅在此特定页面上运行。

Answer 1

那呢：

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

仅在url匹配的情况下才执行此代码，因此您不必两次验证一次
定义下拉列表，以便您可以重用选择器
使用addEventListener更好

让mw知道它是否对您有用。

祝你好运。

JS：添加样式加载，然后使用Javascript

1 个答案: