时间戳

首页 > 解决方案 > 弹出 Squarespace 的条件形式

javascript - 弹出 Squarespace 的条件形式

问题描述

我有一个 squarespace 网站（此处为https://www.americangardenhouse.com/products/o-sweet-viola页面）我正在尝试创建一个条件表单（在这种情况下，它将位于附加产品表单上）。选择产品变体，然后单击“添加到购物车”后，弹出产品表单将显示两个单选输入。如果选择“是”，我希望显示其他产品表单字段（当前隐藏的 CSS），如果“否”，则会出现一条 html 消息，提示客户单击产品表单“添加到购物车”按钮。

<style>
#textarea-yui_3_17_2_1_1585523845981_190824,
#address-yui_3_17_2_1_1585523845981_456969,
#email-yui_3_17_2_1_1585523845981_459960,
#phone-yui_3_17_2_1_1585523845981_461162 {
  display: none;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$('#radio-yui_3_17_2_1_1585593158170_218442 input:radio').click(function() {
    selection = $(this).val();
    if (selection == 'Yes') {
      $('.form-item').show;
    }
  else
    if (selection == 'No') {
      $('form').html('Maybe Next Time. Please complete adding this product to your card by clicking "Add to Cart"');
    }
});
</script>

CSS 使用代码注入器加载到页眉中，脚本位于页脚中。AJAX 当前被禁用。

问题是，点击事件在弹出窗口上不起作用。任何帮助将不胜感激。谢谢！ 在此处输入图像描述

标签： javascriptformssquarespace

解决方案

我相信这是一个可以解决的简单 JS 问题。

您的点击事件不起作用，因为它没有被委派。包含这些按钮的弹出窗口（sqs-modal-lightbox）是通过页面上的 AJAX 添加的。

你需要做这样的事情：

$(document).on('click', '#radio-yui_3_17_2_1_1585593158170_218442 input:radio', function() {
    selection = $(this).val();
    if (selection == 'Yes') {
      $('.form-item').show;
    }
  else
    if (selection == 'No') {
      $('form').html('Maybe Next Time. Please complete adding this product to your card by clicking "Add to Cart"');
    }
});

请注意，检查值的更正确方法是使用更改事件并获取 input.prop()

资源：

https://learn.jquery.com/events/event-delegation/ https://api.jquery.com/prop/#prop-propertyName

您也可以尝试这样的事情（尚未测试过）：

$(document).on('change', '#radio-yui_3_17_2_1_1585593158170_218442 input:radio', function() {
	const inputValue = $(this).val();

	return inputValue == 'Yes' ?
		$('.form-item').show() :
		$('form').html('Maybe Next Time. Please complete adding this product to your card by clicking "Add to Cart"');
});

推荐阅读