我怎样才能让这只有一个元素？

问题描述：

此代码适用于页面中的所有跨度。我应该在哪里为this为特定的？我怎样才能让这只有一个元素？

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(); 
 

 
    }

<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>

+10

编号** **必须是唯一的。 – j08691 2014-10-09 19:39:34

你应该让所有的'ids'都独一无二。例如，“地址1”，“地址2”等。 – 2014-10-09 19:41:10

令人难以置信的是不会介意让别人分享他们的“id”的人数。那会有多好？ – melancia 2014-10-09 19:42:48

答

<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应该然后我会为你更新它。

答

因此，让我解决我帮助你的最后一个答案。

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. 
 

 
});

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

<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>

答

测试此）：

<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>

我怎样才能让这只有一个元素？

相关推荐