CODEWITHSUNDEEP
jqueryhtmlrepeat
Jeffrey Sevinga
Jeffrey Sevinga

Reputation: 3

Jquery, any thoughts how to not repeat the code here?

I use this to make the menu work for my gallery. The .masonry # are on display:none, this way i can use the ID in the menu to show the appropriate gallery when clicked. A lot of code is repeated. Hoping somebody has a good solution that takes away the repeating. If possible.

$(function() {

  $( "#vakantie" ).click(function() {
    $(".masonry").hide(400)
    $( "#travel" ).show( "fade", 1250 );
  });


  $( "#mensen" ).click(function() {
    $(".masonry").hide(400)
    $( "#people" ).show( "fade", 1250 );
  });


  $( "#dieren" ).click(function() {
    $(".masonry").hide(400)
    $( "#animal" ).show( "fade", 1250 );
  });

  $( "#bloemen" ).click(function() {
    $(".masonry").hide(400)
    $( "#corso" ).show( "fade", 1250 );
  });

  $( "#event" ).click(function() {
    $(".masonry").hide(400)
    $( "#eventGallery" ).show( "fade", 1250 );
  });

});

Upvotes: 0

Views: 163

Answers (5)

Calaris
Calaris

Reputation: 158

It's also possible to slightly change the names of your id's, to start with a specific prefix (id='xx_bloemen', id='xx_mensen', id='xx_dieren', and so on). Then in your code:

$('div[id^="xx_"]').click(function() {
  $(".masonry").hide(400);
});

It wil be used for every div with an id starting with 'xx_'. You might need some additional quotes somewhere in this example (I've done this by heart), but I hope you get the idea.

Upvotes: 0

fdomn-m
fdomn-m

Reputation: 28611

You can use data- attributes to link buttons and content. Click a button, read its data- (eg data-link) then find the element in the data-link and show that.

This has the benefit that your code does not need to change when you add/remove buttons/panels and is not reliant on parsing IDs.

$(".link").click(function() {
  var panel = $(this).data("link");
  //console.log(panel)
  $(".panel").hide(function() {
    $("div[data-link='" + panel + "']").fadeIn(1250);
  });
});
.panel {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='link' data-link='travel'>vakentie</button>
<button class='link' data-link='people'>mensen</button>
<div class='panel' data-link='travel'>Travel</div>
<div class='panel' data-link='people'>People</div>

Upvotes: 2

TetrisTyp
TetrisTyp

Reputation: 1

Simple, short and effective. You only have to specify your menu.

$(function() {
    var menu = [
      ['vakantie', 'travel'],
      ['mensen', 'people']
    ];
    menu.forEach(function(element) {
        $( "#"+element[0] ).click(function() {
                $(".masonry").hide(400);
                $( "#"+element[1] ).show( "fade", 1250 );
        });
    });
});

Upvotes: 0

Melcma
Melcma

Reputation: 618

$(function() {

  var $vakantie = $('#vakantie'),
      $mensen = $('#mensen'),
      $dieren = $('#dieren'),
      $bloemen = $('#bloemen'),
      $masonry = $('.masonry'),
      $travel = $('#travel');

  function handleClick() {
    $masonry.hide(400)
    $trave.show('fade', 1250 );
  }

  Array.prototype.forEach.call([$akantie, $mensen, $dieren, $bloemen], 
    function (node) {
      $(node).on('click', handleClick);
    }
  );

});

or create one class like js-fade-in-out and bind an event just to this one class.

Basically you want to pass one event handler if it's the same for every element.

Upvotes: 0

threeFatCat
threeFatCat

Reputation: 819

Create a common class to all buttons, for example 'my-button'

$('body').on('click','.my-button',function(){
    // .. then check the id
    var id = $(this).attr('id');

    $(".masonry").hide(400);

   //..apply condition
    if(id == 'vakantie'){
        $('#travel').show( "fade", 1250 );
    }else if(id == 'mensen'){
        $('#people').show( "fade", 1250 );
    }
        //..etc so on.
});

Upvotes: 2

Related Questions