Using html data to create a jQuery selector -
i'm new jquery.
i want create several divs work buttons , each 1 open object.
in order create single function thinking of doing this:
in hmtl:
<div class="btn example" data-open=".example"> illustration </div> in js:
var $target; var needed = 1; $('.btn').click(function() { $target = $($(this).data("open")); openfunction(needed); }); the openfunction defined before , handle needed animations object, select $target it.
it not working (clearly), how should it?
thanks
edit: want $target $('.[the info in clicked div]')
$target = $($(this).data("open")) doesn't create $target = $('.example')
edit2: openfunction:
function openfunction(x){ if (x > 0) { $target.animate({ right: -menuspace }, {duration: animationtime}); } } with vars menuspace , animationtime defined. function works fine if define $target manually 1 div.
okay, i'm not sure going wrong in script, next works:
var $target; $('.btn').click(function() { // know next works var object = $($(this).data("open")); openfunction(1, object); }); function openfunction(x, object){ if (x > 0) { // lets assign globally opening here $target = object; object.animate({ "margin-left" : 200 + "px" }, 2000, function(){ // lets prove target contains actual object alert($target.html().trim()); }); } } yes, changed values (like 'right' 'margin-left') because i'm not using css, works.
class="snippet-code-html lang-html prettyprint-override"><!doctype html> <html> <head> </head> <body> <div class="btn example" data-open=".example"> illustration </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> var $target; $('.btn').click(function() { var object = $($(this).data("open")); openfunction(1, object); }); function openfunction(x, object){ if (x > 0) { $target = object; object.animate({ "margin-left" : 200 + "px" }, 2000, function(){ alert($target.html().trim()); }); } } </script> </body> </html>
i added 'globalisation' of variable, , proved globalisation seeing contents of element. think setting in 'openfunction' safer, place decide open or not. although think you;de improve of doing class (add class open called, say, '.open' , can find open ones doing $(".open")and set animation in css3 transitions, speed site...)
jquery html
No comments:
Post a Comment