设置默认选项并禁用警报

Question

我已经尝试了一段时间才能让它发挥作用。我对 jquery 或 javascript 没有太多经验。我想设置一个默认选项，该选项在按下按钮时从下拉选项中选择。我希望这也能防止出现警报（不确定是否正确）。我已将以下代码添加到 squarespace 的 "code injection" 部分，这似乎工作正常。（已编辑，我已按照建议删除了代码）

我正在使用 Brine 模板。这是 link 网站 https://www.metastudio35.com/private-photography-services/event-collection 的密码是 "Google360"。

<squarespace:script src="plugin.js" combo="true"?>
<squarespace:script src="site.js" combo="true"?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

然后我在需要重定向按钮的页面中添加了下面的代码。这也有效，但没有 "$("#Additional Photos").val("0");"和“$(“.sqs-widgets-confirmation-content clear”).dialog("close")”行。

<script>

   $(document).ready(function(){


     $("#Additional Photos").val("0");

     $( ".sqs-widgets-confirmation-content clear" ).dialog( "close" )

    $(".sqs-add-to-cart-button").click(function(){
      window.location = '/booking/';

  });
   });


 </script>

这是我要remove/disable的对话框截图。 dialog box pop up screenshot

如果有人能指出我正确的方向或告诉我我做错了什么，那将是一个很好的学徒。

感谢您的帮助。

Answer 1

我检查了你的网站，你的模板似乎没有使用 jQuery，我没有包含 jQuery 只是为了这个简单的功能，而是用 vanilla JS 编写了以下代码相反。

function setValue() {

    var dropdown = document.querySelectorAll('[data-variant-option-name="Additional Photos"]')[0];
    dropdown.value = '0';
    Y.one('#'+dropdown.id).simulate('change');

}

window.onload = setValue;

如果您有兴趣弄清楚为什么您的代码无法正常工作，请查看以下解释：

$('#Additional Photos').val("0")

这行代码正在设置元素 ID "Additional Photos" 的值为“0” .

您的 "Additional Photos" select 盒子没有 ID "Additional Photos"，而是- 它有一个随机生成的 ID，每次刷新页面时都会重新生成。

所以您的代码无法正常工作的原因是您只是定位了错误的元素:)

var dropdown = document.querySelectorAll('[data-variant-option-name="Additional Photos"]')[0];

由于 select 框的 ID 不是恒定的，我们改为通过 'data-variant-option-name' 属性定位 select 框。我只是通过检查 ChromDev 工具上的 select 框来找出这个常量属性。

dropdown.value = '0';
Y.one('#'+dropdown.id).simulate('change');

要考虑的另一件事是您的模板使用 YUI 来处理 select 框。这意味着我们需要手动触发 'change' 事件，以便 UI 更新。从上面的代码可以看出，第一行是设置 select 框的值，而第二行是告诉 YUI 模拟 'change' 事件，因此 - 更新UI.

希望对您有所帮助！

设置默认选项并禁用警报

Setting default option and disabling alert

javascript

jquery

squarespace