Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Fynn Lehnert
Fynn Lehnert
15,244 Points

DRY jQuery ?

hey folks, is there a "DRY-er" way to write this repetetive task?

$(document).ready(function() {
    $('#inl-men-st-1','.nxs-1').on('click', function(){
        $('.inl-men-btn').removeClass('active');
        $('#inl-men-st-1').addClass('active');
        $('.story-content').removeClass('active');
        $('#story-content-1').addClass('active');
    });
    $('#inl-men-st-2','.nxs-2').on('click', function(){
        $('.inl-men-btn').removeClass('active');
        $('#inl-men-st-2').addClass('active');
        $('.story-content').removeClass('active');
        $('#story-content-2').addClass('active');
    });
    $('#inl-men-st-3','.nxs-3').on('click', function(){
        $('.inl-men-btn').removeClass('active');
        $('#inl-men-st-3').addClass('active');
        $('.story-content').removeClass('active');
        $('#story-content-3').addClass('active');
    });
    $('#inl-men-st-4','.nxs-4').on('click', function(){
        $('.inl-men-btn').removeClass('active');
        $('#inl-men-st-4').addClass('active');
        $('.story-content').removeClass('active');
        $('#story-content-4').addClass('active');
    });
});

<nav>
    <ul class="inline-menu inline-menu--content">
        <li><a href="#" class="inl-men-btn" id="inl-men-st-1" class="active">a</a></li>
        <li><a href="#" class="inl-men-btn" id="inl-men-st-2">b</a></li>
        <li><a href="#" class="inl-men-btn" id="inl-men-st-3">c</a></li>
        <li><a href="#" class="inl-men-btn" id="inl-men-st-4">d</a></li>
    </ul>
</nav>

<div id="story-content-1" class="story-content active">
    <p></p>
    <br>
    <a class="next-story nxs-2" href="#">Next</a>
</div>

<div id="story-content-2" class="story-content active">
    <p></p>
    <br>
    <a class="next-story nxs-3" href="#">Next</a>
</div>

... etc

thanks for helping me out!

1 Answer

Caleb Kleveter
MOD
Caleb Kleveter
Treehouse Moderator 37,862 Points
Caleb Kleveter
Caleb Kleveter
Treehouse Moderator 37,862 Points

I am not vary proficient in JS, but a loop should do the trick. Maybe the for...of loop?

var array = [ '1', '2', '3', '4'];

for (let i of array) {
  $('#inl-men-st-' + i,'.nxs-' + i).on('click', function(){
          $('.inl-men-btn').removeClass('active');
          $('#inl-men-st-' + i).addClass('active');
          $('.story-content').removeClass('active');
          $('#story-content-' + i).addClass('active');
      });
}
Fynn Lehnert
Fynn Lehnert
15,244 Points

thanks for trying to tackle this with me. how would you trigger the loop?

Caleb Kleveter
Caleb Kleveter
Treehouse Moderator 37,862 Points

If you put the loop in the $(document).ready function, when ever the function is called, the loop should fire.

$(document).ready(function() {
  var array = [ '1', '2', '3', '4'];

  for (let i of array) {
    $('#inl-men-st-' + i,'.nxs-' + i).on('click', function(){
            $('.inl-men-btn').removeClass('active');
            $('#inl-men-st-' + i).addClass('active');
            $('.story-content').removeClass('active');
            $('#story-content-' + i).addClass('active');
        });
  }
});
Fynn Lehnert
Fynn Lehnert
15,244 Points

well now this error gets thrown: Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

btw whats the let part for? never seen that..

Caleb Kleveter
Caleb Kleveter
Treehouse Moderator 37,862 Points

Yea, I wasn't sure if this would work. let is a variable with different scope, but I forget what. You might want to change that to var, and see if anything changes. Other then that, I can't think of any thing else.