javascript - jQuery attr() failing -
in following code, on line commented "problem line", attr causes console.log print out "undefined" when click on 1 of s. can't seem figure out why:
test.js
var html = ''; // number of panels in carousel var panelcount = 0; // panel forefront of carousel var currentpanel = 0; $(document).ready(function(){ (var i=0; < 5; i++) { html += '<div class="team-member" id="' + panelcount + '">' + panelcount + '</div>'; html += '<div class="reflection" id="' + panelcount + '"></div>'; panelcount++; } $('#carousel').html(html); $(".container-carousel").on('click', '.team-member', function(e) { var target = $(e.currenttarget); var targetid = parseint(target.attr('id')); var frontrotation = currentpanel * (360/panelcount); $("#" + targetid + ".reflection").css("transform", "rotatey( " + frontrotation + "deg ) translatez( 288px ) translatey( 175px ) translatez( 175px ) rotatex( 90deg )"); var targetidstring = '' + targetid; /* problem line: */ $("#" + currentpanel + ".reflection").attr('id', targetid); console.log($("#" + currentpanel + ".reflection").attr('id')); $("#" + targetid + ".reflection").attr('id', currentpanel); }); });
test.html
<!doctype html> <!-- jquery--> <script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type = "text/javascript" src = "test.js"></script> <section class="container-carousel"> <div id="carousel" style="transform: translatez(-288px) rotatey(-360deg);"></div> </section> </html>
any ideas why?
this because after change id of element, try logging selecting old id.
$("#" + currentpanel + ".reflection").attr('id', targetid); /*the id targetid*/ console.log($("#" + currentpanel + ".reflection").attr('id')); /*currentpanel not work because element id no longer exists*/
change console.log
console.log($("#" + targetid + ".reflection").attr('id'));
see working here
Comments
Post a Comment