javascript - jQuery selector eq:() not working -

-

i made toggle button pure css/jquery , works perfectly. problem comes when duplicated , tried toggle it. supposed, toggles 'toggled' @ same time, here code far:

html

<div id="container">             <div id="switch-1"><div class="light-1"></div><div class="switch"><div class="space"><div class="circle"></div></div></div><div class="light-2"></div></div><br><br>         <div id="switch-2"><div class="light-1"></div><div class="switch"><div class="space"><div class="circle"></div></div></div><div class="light-2"></div></div> </div>

jquery

$(function(){             $('.space').click(function(){                 if($('.circle').hasclass("detector")){                     $('.circle').animate({ marginleft: "2px"}, "slow", function(){$('.light-1').css("background","#8e3135"); $('.light-2').css("background","#adafb2"); $('.circle').removeclass("detector");});                 } else {                     $('.circle').animate({ marginleft: "47px"}, "slow", function(){$('.light-1').css("background","#adafb2"); $('.light-2').css("background","#8e3135"); $('.circle').addclass("detector");});                 }             });              $('.space').eq(1).click(function(){                 if($('.circle').eq(1).hasclass("detector-1")){                     $('.circle').eq(1).animate({ marginleft: "2px"}, "slow", function(){$('.light-1').eq(1).css("background","#8e3135"); $('.light-2').eq(1).css("background","#adafb2"); $('.circle').eq(1).removeclass("detector-1");});                 } else {                     $('.circle').eq(1).animate({ marginleft: "47px"}, "slow", function(){$('.light-1').eq(1).css("background","#adafb2"); $('.light-2').eq(1).css("background","#8e3135"); $('.circle').eq(1).addclass("detector-1");});                 }             });         });

or jsfiddle:

http://jsfiddle.net/ew0s6nqd/

this how works, when click toggle detects if has class called "detector". if doesn't, animates toggle , creates one. if does, means class created animates toggle , removes class.

ok, problem starts when duplicate toggle. have 2 of them want activate individually. easiest solution using :eq() jquery selector or .eq() jquery function people classified more 'correct' option.

so add code of second toggle didn't worked. in fiddle above can test yourself. please if know problems, let me know, thanks!

edit: used :eq() selector didn't work either.

edit 2: use different detector class called "detector-1" prevent interfering other one.

$(function () {     //the click function every element .space class     $('.space').click(function () {         //check on .circle child of clicked .space using "this"         if ($('.circle', this).hasclass("detector")) {             //and animate             $('.circle', this).animate({                 marginleft: "2px"             }, "slow", function () {                 // since in animate callback, "this"                  // .circle of clicked .space                 // want lights change - have travel dom upwards                 // 1st .parent() brings .space                 // 2nd .parent() leads .switch                 // siblings() let find .light-1 element                 $(this).parent().parent().siblings('.light-1').css("background", "#8e3135");                 // same here light-2                 $(this).parent().parent().siblings('.light-2').css("background", "#adafb2");                 $(this).removeclass("detector");             });         } else {             $('.circle', this).animate({                 marginleft: "47px"             }, "slow", function () {                 $(this).parent().parent().siblings('.light-1').css("background", "#adafb2");                 $(this).parent().parent().siblings('.light-2').css("background", "#8e3135");                 $(this).addclass("detector");             });         }     }); });

using selector, need define click handler once - , still works endless numbers of buttons... "see working fiddle"

forgot mention. changed css in fiddle, since background image didn't show up, created white circle via css...


Comments

Post a Comment

Popular posts from this blog

matlab - "Contour not rendered for non-finite ZData" -

-
i'm trying plot frequency characteristic equation using ezplot, matlab gives following warning, "contour not rendered non-finite zdata". have used command plot frequency equations warning , plot display empty , not change axis range well. can please help. appreciated. here's code i'm using. % transfer matrix case-i, thin rotor clear all; clc; ei = 1626; l = 0.15; m = 0.44108; = 2.178*10^-4; i_p = 2.205*10^-5; itr = 0.24; i_pr = 0.479; syms p n; f = [1 l*1i l^2/(2*ei)*1i l^3/(6*ei); 0 1 l/ei -l^2/(2*ei)*1i; 0 0 1 -l*1i; 0 0 0 l]; p = [ 1 0 0 0; 0 1 0 0; 0 -it*p^2+i_p*n*p 1 0; -m*p^2 0 0 1]; p_r = [1 0 0 0; 0 1 0 0; 0 -itr*p^2+i_pr*n*p 1 0; -m*p^2 0 0 1]; = f*p*f*p*f*p*f; b = p_r*f*p*f*p*f; r = a(1,2)/a(1,4); a12_p = 0; a22_p = a(2,2)-r*a(2,4); a32_p = a(3,2)-r*a(3,4); a42_p = a(4,2)-r*a(4,4); ap(2,2) = a22_p; ap(3,2) = a32_p; ap(4,2) = a42_p; ap(4,4) = 1; c = b*ap; m = [c(3,2) c(3,4); c(4,2) c(4,...
Read more

delphi - Indy UDP Read Contents of Adata -

-
i using indy udp server read string of data. however, not know how work adata parameter. can around converting binary using bytetobin function below , convert hex using bintohex1 . feel stupid , works slow. know how can directly results without 2 conversions? thanks!! here codes: procedure tform1.idudpserver1udpread(athread: tidudplistenerthread; const adata: tidbytes; abinding: tidsockethandle); var buf: tidbytes; buffer: string; data_received: string; begin if bytestostring(adata) <> 'hello' begin buffer := hextostring('00'); setlength(buf, length(buffer)); copytidstring(buffer, buf, 0); abinding.sendto(abinding.peerip, abinding.peerport, buf); data_received := bintohex1(bytetobin(adata[1]) + bytetobin(adata[2]) + bytetobin(adata[3]) + bytetobin(adata[4]) + bytetobin(adata[5]) + bytetobin(adata[6]) + bytetobin(adata[7]) + bytetobin(adata[8]) + bytetobin(adata[9]) + bytetobin(adata[10]) + bytetobin(adata[11...
Read more

javascript - Any ideas when Firefox is likely to implement lengthAdjust and textLength? -

-
any ideas when firefox implement lengthadjust andtextlength?..... working svg application. lengthadjust , textlength working fine in chrome not working in fire fox . <svg viewbox = "0 0 500 300" version = "1.1"> <defs> <path id="s3" d="m 10,90 q 100,15 200,70" /> </defs> <g> <text font-size = "20"> <textpath xlink:href="#s3" textlength="205"> short text</textpath> </text> <use xlink:href="#s3" fill="none" stroke="black" stroke-width="1"/> </g> </svg> this implemented in firefox text elements (not textpath or tspan) in case that's ok though can move attribute text element. <svg viewbox = "0 0 500 300" version = "1.1"> <defs> ...
Read more