Question

我有一个简单的jQuery插件，可为div元素添加背景色。

我希望在插件中添加一个设置，以便可以根据视口的宽度更改选择器的背景颜色。

我目前已经设置了一个选项，以便您可以使用JavaScript对象轻松设置断点宽度以及该断点和向上的设置。

由于某种原因，响应对象中的最后一个设置有效，而前两个无效。有人可以解释为什么吗？

我希望有一些类似于Slick carousel上响应式设置的工作方式。

这是我的JavaScript插件代码：

<script>
(function($, window, document, Math, undefined) {
  $.fn.myPlugin = function(options) {
    options = $.extend(
      {
        background: "orange"
      },
      options
    );

    if (options.background) {
      $("div").css("background-color", options.background);
    }

    if (options.responsive) {
      options.responsive.forEach(function(obj, index) {
        var breakpoint = obj["breakpoint"];
        var settings = obj["options"];

        var background = settings["background"];

        $(window).resize(function() {
          if (window.innerWidth < breakpoint) {
            if (options.background) {
              $("div").css("background-color", options.background);
            }
          } else {
            if (options.background) {
              $("div").css("background-color", background);
            }
          }
        });
      });
    }
  };
})(jQuery, window, document, Math);
</script>

这是我在文档中初始化的方式

<script>
  $(document).ready(function() {
    $('div').myPlugin({
      background: 'red',
      responsive: [{
          breakpoint: 100,
          options: {
            background: 'blue'
          }
        },
        {
          breakpoint: 400,
          options: {
            background: 'green'
          }
        },
        {
          breakpoint: 700,
          options: {
            background: 'yellow'
          }
        }
      ]
    });
  });
</script>

这是一个CodePen：https://codepen.io/anon/pen/daJbEa

如何基于视口宽度更改JavaScript插件设置？

0 个答案: