2

我必须将 Healcode 小部件（通过 Mind Body）合并到我正在处理的站点中。我的目标是在该页面上有一个按钮更改 Healcode 小部件的下拉选择并重新加载小部件以反映下拉更改。

到目前为止，我已经能够创建一个按钮，在单击时将下拉选择更改为所需的值。但是，它不会重新加载小部件以反映更改。我仍然必须手动单击下拉菜单才能做到这一点。

任何帮助表示赞赏！这是我到目前为止所拥有的：

HEALCODE 下拉过滤器的 HTML：

<div class="filters">
        <select name="mbo_class" id="mbo_class">
<option value="">All Classes</option><option value="58">200 hour Teacher Training</option>
<option value="3">Basics</option>
<option value="59">Basics/Power</option>
<option value="85">Basics/Restore + Meditation</option>
<option value="156">Cozy Winter YIN &amp; Restore</option>
<option value="23">Deep Stretch/YIN</option>
<option value="154">Express Power</option>
<option value="140">HIIT Power Yoga</option>
<option value="12">Music &amp; Power Yoga</option>
<option value="5">Power Yoga </option>
<option value="46">Power Yoga/Restore </option>
<option value="138">Simply Stretch</option>
<option value="30">Tween Yoga</option>
<option value="139">YOD (Yoga + HIIT)</option></select>
</div>

用于更改选择的按钮的 HTML 和 JS：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn3").click(function(){
    $("#mbo_class").val("3");
  });
});
</script>
<button id="btn3">Set Value</button>

我在想一个可行的解决方案可能会以某种方式捕获下拉列表更改为然后重新加载页面，但我的尝试到目前为止还没有奏效。这是我最近的尝试：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn3").click(function(){
    $("#mbo_class").val("3");
  });

  var selectedProduct = sessionStorage.getItem("product");
if(selectedProduct != undefined || selectedProduct != null){
    $("mbo_class").first().find(":selected").removeAttr("selected");
  $("mbo_class").find("option").each(function () {
            if ($(this).val() == selectedProduct) {
                $(this).attr("selected", true);
            }
        });
}

$('mbo_class').change(function () {
    sessionStorage.setItem("product", $("mbo_class").first().val());

  location.reload();
});
</script>
<button id="btn3">Set Value</button>
4

1 回答 1

0

所以我找到了解决方案！这不是我计划去的方向，但它有效！由于我实际上无法更改小部件的 HTML——我所做的研究导致我陷入了很多死胡同。

在 HealCode 小部件应用程序中，我为每个类类型（上面提到的过滤器选项）创建了一个版本的计划小部件。

然后我设置按钮来更改整个 div id以显示相关的计划小部件。（而不仅仅是过滤当前的日程小部件。）

我们将使用“Basics Class”的过滤示例。

这是我的 HTML 代码：

<div id="widget-container">
  <healcode-widget data-type="schedules" data-widget-partner="object" data-widget-id="3c106917a43" data-widget-version="0">
</healcode-widget>

<a id="schedule-basics" class="button">Basics schedule</a>

这是脚本——它将显示的时间表更改为“Basics Class”时间表（很像过滤器选择）：

 $(document).ready(function() {
    var scheduleWidgetMarkup = '<healcode-widget data-type="schedules" data-widget-partner="object" data-widget-id="3c1218147a43" data-widget-version="1" ></healcode-widget>';
    $('body').on('click', '#schedule-basics', function(e) {
      e.preventDefault();
      $('#widget-container').html(scheduleWidgetMarkup);
    });
  });
于 2019-12-27T18:30:36.027 回答