good point, if links are sortable would need to re think my method.
Assumed they were in order in my example. If they are in order however
there is less searching of the DOM required, especially if there are
hundreds or thousands of <a> tags
olsch01 wrote:
Hi Charlie,
one drawback of your function that I see is, that it only works if the
divs with the data to reveal appear in sorted order in the code (i.e.
dataToReveal1, dataToReveal2, dataToReveal3 etc.). If you mix them up,
the function doesn't work properly anymore (at least not in my test),
since your just counting up i. So there is only a loose connection
between the link and the data div.
Doesn't necessarily have to been an issue though :)
On 4 Jul., 16:17, Charlie <charlie...@gmail.com> wrote:
Cleaner if you can use a class on the links. Assume they now have class "dataReveal".
i=1;
$(".dataReveal").each(function () {
var actOnElem = "#dataToReveal" +i;
$(this).click( function() {
$(actOnElem).slideDown();
return false;
});
i++;
});
olsch01 wrote:OK, I guess this is one possible solution: $('a[id^=dataRevealLink]').each(function(){ var eventElemId = $(this).attr('id'); var eventElemIdNo = eventElemId.substring(14, eventElemId.length); var actOnElem = $('#dataToReveal' +eventElemIdNo); $(this).click(function() { actOnElem.slideDown(); return false; }) }); Cheers On 4 Jul., 12:59, olsch01<ollo...@web.de>wrote:Hi, I'm not a JS/jQuery expert, so as a quick test I added alert (actOnElem); inside your $(eventElem).click( function(), and the result always was #dataToReveal12. As mentioned, I am not an expert and still learning myself, but I think on dom ready the loop simply starts running until i equals 12. And it's not until then, that the click function comes into play. That's all I can say at the moment. If I have more time later, I will look into this again. Cheers On 4 Jul., 03:59, bsenftner<bsenft...@earthlink.net>wrote:Just learning _javascript_ & JQuery, but an experienced developer, I've created a page with a series of elements that use the .slideDown() and .slideUp() functions to reveal and hide the different areas of content on the page.To facilitate this, the page's html uses links with ids similar to: { "dataRevealLink1", "dataToReveal1", "dataHideLink1" }. Clicking on a "data-reveal-link" causes a .slideDown() animation on "data to reveal", with appropriate reverse logic attached for the data hiding as well.The page in question has 12 such sections, and writing the script long form (no loops) works fine. However, I would like to generalize this logic, but my first attempt at a loop to attach the DOM element callbacks does not work, and I suspect it's a scoping issue with _javascript_: for (var i = 1; i <= 12; i++) { var eventElem = "#dataRevealLink" + i; &nbs
p; var actOnElem = "#dataToReveal" + i; $(eventElem).click( function() {    $(actOnElem).slideDown();    return false; // prevents the link from processing this click   }); }I suspect that in the above logic, the mouse-click callback is attaching to the dataRevealLink1-12 fine, however once inside the callback, "actOnElem" is not what I'm expecting - possibly due to the scope of actOnElem? I'm not entirely sure...I've added console.log() calls to the above logic, and everything is as I expect during the above looping, but I am never getting any of the callbacks to run, so I can never see any
console.log() output from inside a mouse-click handler...Any advice anyone?-- View this message in context:http://www.nabble.com/JQuery-events-and-a-possible-scoping-error-on-m... Sent from the jQuery General Discussion mailing list archive at Nabble.com.
|
