Question

此代码适用于页面中的所有跨度。我应该在哪里放置this特定的一个？

＆＃13;

    var next = function(e) {
      var current = $('.active');
      var prev = $('#prev');
      pos = $('.active').attr('id');

      $("#num").text('(' + pos + '/' + researchPlaces.length + ')');


      $(current).next().attr("class", "active");
      $(current).attr("class", "passive");
      e.stopPropagation();

    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="address"><a id="prev">Prev </a>
  <span id="address" class="active">0 Elgin Street</span>
  <span id="address" class="passive">1 Elgin Street</span>
  <span id="address" class="passive">2 Elgin Street</span>
  <span id="address" class="passive">3 Elgin Street</span>
  <span id="address" class="passive">4 Elgin Street</span>
  <span id="address" class="passive">5 Elgin Street</span>
  <span id="address" class="passive">6 Elgin Street</span>
  <span id="address" class="passive">7 Elgin Street</span>
  <span id="address" class="passive">8 Elgin Street</span>
  <span id="address" class="passive">9 Elgin Street</span>
  <a id="next"> Next</a>
</div>

＆＃13;

Answer 1

<div class="container">
  <span id="address1" class="passive active">0 Elgin Street</span>
  <span id="address2" class="passive">1 Elgin Street</span>
  <span id="address3" class="passive">2 Elgin Street</span>
  <span id="address4" class="passive">3 Elgin Street</span>
  <span id="address5" class="passive">4 Elgin Street</span>
  <span id="address6" class="passive">5 Elgin Street</span>
  <span id="address7" class="passive">6 Elgin Street</span>
  <span id="address8" class="passive">7 Elgin Street</span>
  <span id="address9" class="passive">8 Elgin Street</span>
  <span id="address10" class="passive">9 Elgin Street</span>
</div>

现在你的JS例子

$(function(){
    var current = $('.active');
    var prev = $('#prev');
    $('.active').on('click',function(){
         alert(this.id);
     });
 });

因此，如果有效更改，那么您可以在点击事件中使用this。希望HTML和JS能帮助您澄清出错的地方。一旦说明了pos和researchPlace应该是什么，我就会为您更新。

Answer 2

所以让我解决一下我帮助你的最后一个答案。

＆＃13;

var addyCount = $(".addy").length;  // get the count of items

$("#address").on("click", "a", function () {  //add click handler to the anchors
  var last = $(".active").toggleClass("active passive");  //Select current active item. It removes active, adds passive classes
  var dir = $(this).data("dir");  //stored the next/prev as a data attribute so one click handler is needed
  var sib = last[dir](".passive");  //Find the next/previous passive sibling
  if (sib.length === 0) {
      sib = last;  //if we can not find the next/previous than just pick the last selected 
  }
  sib.toggleClass("active passive");  //add active and remove passive

  $("#num").html((sib.index(".addy") + 1) + "/" + addyCount);  //index() starts at zero, so need to add one. 

});

＆＃13;

.active {
  display: block
}
.passive {
  display: none
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="num">1</div>
<div id="address"> <a id="prev" data-dir="prev">Prev </a>
  <span class="addy active">0 Elgin Street</span>
  <span class="addy passive">1 Elgin Street</span>
  <span class="addy passive">2 Elgin Street</span>
  <span class="addy passive">3 Elgin Street</span>
  <span class="addy passive">4 Elgin Street</span>
  <span class="addy passive">5 Elgin Street</span>
  <span class="addy passive">6 Elgin Street</span>
  <span class="addy passive">7 Elgin Street</span>
  <span class="addy passive">8 Elgin Street</span>
  <span class="addy passive">9 Elgin Street</span>
  <a id="next" data-dir="next"> Next</a>
</div>

＆＃13;

Answer 3

测试这个;）：

<html>
  <head>
    <title>this is a test</title>
    <meta content="">
      <style></style>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <script type="text/javascript">
    $(document).ready(function(){
    var prev = $("#prev");
    var next = $("#next");
    var cur = $("#address .active"); /* just spans that in the #address ! */
    var curNum = parseInt(cur.text().match(/\d+/));
    /* ############ the next function  #############*/
    next.click(function(){
    if(cur.next().attr("id") != "next"){
    curNum += 1;
    $("#num").text(curNum);
    cur.attr("class","addy passive");
    cur = cur.next();
    cur.attr("class","addy active");
    }
    });
    /* ########### the prev function ###############*/
    prev.click(function(){
    if(cur.prev().attr("id") != "prev"){
    curNum -= 1;
    $("#num").text(curNum);
    cur.attr("class","addy passive");
    cur = cur.prev();
    cur.attr("class","addy active");
    }
    });
    });
      </script>
    </head>
    <body>

      <div id="num">1</div>
      <div id="address"> <a id="prev" data-dir="prev">Prev </a>
      <span class="addy active">0 Elgin Street</span>
      <span class="addy passive">1 Elgin Street</span>
      <span class="addy passive">2 Elgin Street</span>
      <span class="addy passive">3 Elgin Street</span>
      <span class="addy passive">4 Elgin Street</span>
      <span class="addy passive">5 Elgin Street</span>
      <span class="addy passive">6 Elgin Street</span>
      <span class="addy passive">7 Elgin Street</span>
      <span class="addy passive">8 Elgin Street</span>
      <span class="addy passive">9 Elgin Street</span>
      <a id="next" data-dir="next"> Next</a>
      </div>

    </body>
  </html>

我怎样才能只为一个元素做这个？

3 个答案: