Question

我在构建一个脚本以在选中复选框时显示/隐藏某些内容。由于我的内容分为多个页面，因此我需要在您更改页面时选中此复选框。我已经阅读了localStorage，尝试了这一点并且效果很好。

但问题是，当您更改页面时，我的脚本不会被触发。因此，复选框保持选中状态，但不应显示的内容仍然可见。

所以我拥有（不要介意Twig标签，脚本本身也适用!!）

$(function() {
  var test = localStorage.input === 'true' ? true : false;
  $('#stock').prop('checked', test || false);
});

$(document).ready(function() {
  $.getJSON('{{ product.url | url }}?format=json', function(data) {
    $.each(data.product.variants, function(index, variant) {
      if (variant.stock.on_stock) {
        $('.item-image-container.{{ product.id }}')
          .find('figure')
          .after('<div class="label_ship {{ product.id }}"></div>');
        $('.label_ship.{{ product.id }}').addClass('active');
      }
    });
  });

  $('#stock').change(function() {
    localStorage.input = $(this).is(':checked');
    if (this.checked && !$('.label_ship.{{ product.id }}')
        .hasClass('active')) {
      $('.stock-check-{{ product.id }}').fadeOut('fast');
    } else {
      $('.stock-check-{{ product.id }}').fadeIn('fast');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stock-box">
  <input type="checkbox" value="" id="stock">
  <label for="stock">show only on stock</label>
</div>

有人可以帮忙吗？将所有内容包装在函数中然后在页面更改时重新运行该函数可能更好吗？

Answer 1

您正在运行以淡入/淡出内容的功能绑定到change上的#stock个事件。但是，您只需在之后绑定它，即可在第一个$(function(){})块中更改其值。我怀疑通过将值更改代码移动到绑定代码之后可以解决问题。

此外，请查看您的问题的评论，因为那里有一些很好的建议：）

在localStorage之后重新运行脚本

1 个答案: