How Can I Make This For Only One Element?
This code works for all the spans in the page. Where should I put this for the specific one?
Solution 1:
<divclass="container"><spanid="address1"class="passive active">0 Elgin Street</span><spanid="address2"class="passive">1 Elgin Street</span><spanid="address3"class="passive">2 Elgin Street</span><spanid="address4"class="passive">3 Elgin Street</span><spanid="address5"class="passive">4 Elgin Street</span><spanid="address6"class="passive">5 Elgin Street</span><spanid="address7"class="passive">6 Elgin Street</span><spanid="address8"class="passive">7 Elgin Street</span><spanid="address9"class="passive">8 Elgin Street</span><spanid="address10"class="passive">9 Elgin Street</span></div>Now your JS example
$(function(){
var current = $('.active');
var prev = $('#prev');
$('.active').on('click',function(){
alert(this.id);
});
});
So if active changes then you can use this in the click event. Hopefully the HTML and JS will help you to clarify where you went wrong. Once you state what pos and researchPlace should be then I'll update it for you.
Solution 2:
So let me work off my last answer that I helped you with.
var addyCount = $(".addy").length; // get the count of items
$("#address").on("click", "a", function () { //add click handler to the anchorsvar last = $(".active").toggleClass("active passive"); //Select current active item. It removes active, adds passive classesvar dir = $(this).data("dir"); //stored the next/prev as a data attribute so one click handler is neededvar sib = last[dir](".passive"); //Find the next/previous passive siblingif (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
}<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divid="num">1</div><divid="address"><aid="prev"data-dir="prev">Prev </a><spanclass="addy active">0 Elgin Street</span><spanclass="addy passive">1 Elgin Street</span><spanclass="addy passive">2 Elgin Street</span><spanclass="addy passive">3 Elgin Street</span><spanclass="addy passive">4 Elgin Street</span><spanclass="addy passive">5 Elgin Street</span><spanclass="addy passive">6 Elgin Street</span><spanclass="addy passive">7 Elgin Street</span><spanclass="addy passive">8 Elgin Street</span><spanclass="addy passive">9 Elgin Street</span><aid="next"data-dir="next"> Next</a></div>Solution 3:
test this ;) :
<html><head><title>this is a test</title><metacontent=""><style></style><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scripttype="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><divid="num">1</div><divid="address"><aid="prev"data-dir="prev">Prev </a><spanclass="addy active">0 Elgin Street</span><spanclass="addy passive">1 Elgin Street</span><spanclass="addy passive">2 Elgin Street</span><spanclass="addy passive">3 Elgin Street</span><spanclass="addy passive">4 Elgin Street</span><spanclass="addy passive">5 Elgin Street</span><spanclass="addy passive">6 Elgin Street</span><spanclass="addy passive">7 Elgin Street</span><spanclass="addy passive">8 Elgin Street</span><spanclass="addy passive">9 Elgin Street</span><aid="next"data-dir="next"> Next</a></div></body></html>
Post a Comment for "How Can I Make This For Only One Element?"