Question

我正在尝试制作我的第一个jquery插件。当我调用我的方法一次，它完美地工作，但两次使用不同的ID，不起作用。

<div id="player_stats_away">
<div class="away_prenext"><span class="prev">Prev.</span><span class="next">Next</span></div>

<div class="away_players">
    <ul class="player_stats">
        <li><span>Content 1</span></li>
        <li><span>Content 2</span></li>
        <li><span>Content 3</span></li>

    </ul>
</div>

<script>
    jQuery(document).ready(function($) {
            $("#player_stat_home").playerPage();
            $("#player_stat_away").playerPage();

    });
</script>

我只是想知道如何单独使用这个插件。

如果你帮助我，我会很高兴：）

感谢。以下工作完美。顺便说一句，抱歉我的英语：）

(function($) {
  //"use strict";
  $.fn.playerPage = function() {
    $("li").hide();
    $("li:first").show();
    var lisayisi = $("li").length;
    $("span.prev").on('click', function() {
      var active_li_index = $("li:visible").index();
      if (active_li_index == 0) {
        $("li").eq(active_li_index).hide('slide', {
          direction: 'right'
        }, 150, function() {
          $("li").eq(-1).show('slide', {
            direction: 'left'
          }, 500);
        })
      } else {
        $("li").eq(active_li_index).hide('slide', {
          direction: 'right'
        }, 150, function() {

          $("li").eq(active_li_index - 1).show('slide', {
            direction: 'left'
          }, 500);
        })
      }
    });

    $("span.next").on('click', function() {
      var active_li_index = $("li:visible").index();
      if (active_li_index == (lisayisi - 1)) {
        $("li").eq(active_li_index).hide('slide', {
          direction: 'left'
        }, 100, function() {

          $("li").eq(0).show('slide', {
            direction: 'right'
          }, 500);
        });
      } else {
        $("li").eq(active_li_index).hide('slide', {
          direction: 'left'
        }, 100, function() {

          $("li").eq(active_li_index + 1).show('slide', {
            direction: 'right'
          }, 500);
        });
      }
    });
  };
})(jQuery);

jQuery(document).ready(function($) {
  $("#player_stat_home").playerPage();
});

ul li {
  list-style: none;
  display: inline-block;
}

span.prev,
span.next {
  display: inline-block;
  background-color: #000;
  color: #fff;
  cursor: pointer;
  width: 50px;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>


<div id="player_stats_home">
  <div class="home_prevnext"><span class="prev">Prev.</span><span class="next">Next</span></div>

  <div class="home_players">
    <ul class="player_stats">
      <li><span>Content 1</span></li>
      <li><span>Content 2</span></li>
      <li><span>Content 3</span></li>
    </ul>
  </div>

</div>

Answer 1

您需要隔离小部件的特定实例中仅的<li>和<span class="prev">等元素，否则您无处可寻在这些元素的页面中。

find()是隔离这些元素的最简单方法

我不会重写整个插件，但会向您显示使用

的模式

$.fn.playerPage = function() {
  // loop over instances and return `this` to allow chaining
  return this.each(function() {
    var $this = $(this), // widget instance
      // store reference to `<li>` that are only in this instance of widget
      $li = $this.find("li"),
      // length within this instance
      lisayisi = $li.length;


    // only hide/show `<li>` within this instance of widget
    $li.hide().filter(':first').show();

    // work with this widget instance of control elements
    $this.find("span.prev").on('click', function() {
      // index withing this widget instance
      var active_li_index = $li.filter(":visible").index();

    });
    ......
  })
}

由于插件功能中的each循环，您可以执行以下操作：

$("#player_stat_home, #player_stat_away").playerPage();

在同一页面中的一个Jquery插件中运行两次

1 个答案: