Javascript variable, increment function?

Question

I have a problem with the following JavaScript code:

$( "#toggleLog-1" ).click(function() {
  $( "#toggled-1" ).slideToggle( "slow" );
});
$( "#toggleLog-2" ).click(function() {
  $( "#toggled-2" ).slideToggle( "slow" );
});
$( "#toggleLog-3" ).click(function() {
  $( "#toggled-3" ).slideToggle( "slow" );
});
/// ... and many other IDs

As you can see, I want to know how to increment the id and compact my code, because I have many IDs in my css file. In php I know how I would do this (with a foreach and increment function), but how can I do it in JavaScript?

tymeJV · Accepted Answer · 2013-10-04 14:44:00Z

4

Hmm, how about:

$("[id^=toggleLog]").click(function() {
    var idNum = this.id.split("-")[1];
    $("#toggled-" + idNum).slideToggle("slow");
});

answered Oct 4, 2013 at 14:44

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

christopher Over a year ago

Beat me to it! Clean solution :) +1

Ian · Accepted Answer · 2013-10-10 21:28:54Z

4

Although all your clickable elements seem to conform to a specific convention with their id attributes, it would be easier and cleaner to give all the clickable elements a specific class, and a data-* attribute specifying a selector for what element to toggle. For example, have this structure:

<div class="toggler" data-toggler="#toggled-2"></div>
<div id="toggled-2"></div>

And use this:

$(".toggler").on("click", function () {
    var $this = $(this),
        toggler = $this.attr("data-toggler");

    $(toggler).slideToggle("slow");
});

It targets all the clickable elements by the toggler class. In the click handler, it looks at its specific data-toggler attribute, and selects elements by that, calling .slideToggle() on any found.

edited Oct 10, 2013 at 21:28

answered Oct 4, 2013 at 14:44

Ian

51k13 gold badges104 silver badges111 bronze badges

Collectives™ on Stack Overflow

Javascript variable, increment function?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related