我怎样才能只为一个元素制作这个？
Posted
技术标签:
【中文标题】我怎样才能只为一个元素制作这个？【英文标题】：How can I make this for only one element? 【发布时间】：2014-12-04 20:49:45 【问题描述】：此代码适用于页面中的所有跨度。我应该把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>【问题讨论】：
ID 必须是唯一的。 您应该使您的所有ids 独一无二。例如，address1、address2 等。
不介意别人分享他们的id 的人数之多令人难以置信。那该多好？
我把它们做成 1,2,3,4,5 但还是不行。
我看到您没有使用我在其他问题中的代码。你期望 pos 是什么？ $("#num") 是什么？ researchPlaces 是什么？
【参考方案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 应该是什么，我会为你更新它。
【讨论】：
【参考方案2】：所以，让我完成我帮助你的最后一个答案。
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>【讨论】：
【参考方案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>
【讨论】：
以上是关于我怎样才能只为一个元素制作这个？的主要内容，如果未能解决你的问题，请参考以下文章