Jquery if element has same class?

Question

Im having a page with lot of lightbox (more than one hundred)

Each time I have to add in lightbox-content and trigger-lightbox a class

like 1 2 3 4

and in the jquery i need to duplicate it to trigger the good lightbox. like

$('a#trigger-lightbox.1').click(function() {
    $('.lightbox-background').fadeIn('slow'); 
    $('#lightbox-content.1').fadeIn('slow'); 
});

$('a#trigger-lightbox.2').click(function() {
    $('.lightbox-background').fadeIn('slow'); 
    $('#lightbox-content.2').fadeIn('slow'); 
});

$('a#trigger-lightbox.3').click(function() {
    $('.lightbox-background').fadeIn('slow'); 
    $('#lightbox-content.3').fadeIn('slow'); 
});

$('a#trigger-lightbox.4').click(function() {
    $('.lightbox-background').fadeIn('slow'); 
    $('#lightbox-content.4').fadeIn('slow'); 
});

I'd like instead to have a javascript to add the class 1 2 3 etc, automatically + the jquery to trigger the lightbox-content if it has the same class

or at leat to have something like 'if trigger-lightbox- has same class of lightbox-content.

this way the code will be much shorter.

How is this possible to achieve ?

So far I tried the following:

var same = $(this).attr("class");

$('a#trigger-lightbox'+'.'+same).click(function() {
    $('.lightbox-background').fadeIn('slow'); 
    $('#lightbox-content'+'.'+same).fadeIn('slow'); 
});

But no success . . .

I have this codepen if that help ?

https://codepen.io/anon/pen/VQQzdJ

Really appreciate all your help !!

First of all the id should be unique in the same document... — Zakaria Acharki
– Zakaria Acharki, Commented Feb 19, 2018 at 10:55

Zakaria Acharki · Accepted Answer · 2018-02-19 11:09:32Z

1

Working Codepen.

First of all the id should be unique in the same document, so please replace the duplicate ones by common classes, then you could use data-* attributes as the following example shows :

$('a.trigger-lightbox').click(function() {
  var index = $(this).data('index');

  $('.lightbox-background').fadeIn('slow'); 
  $('.lightbox-content.'+index).fadeIn('slow'); 
});

$('.lightbox-background').click(function() {
  $(this).fadeOut('slow'); 
  $('.lightbox-content').fadeOut('slow'); 
});

$('a.trigger-lightbox').click(function() {
  var index = $(this).data('index');

  $('.lightbox-background').fadeIn('slow');
  $('.lightbox-content.' + index).fadeIn('slow');
});

$('.lightbox-background').click(function() {
  $(this).fadeOut('slow');
  $('.lightbox-content').fadeOut('slow');
});

.lightbox-content {
  background: white;
  padding: 50px;
  margin: 0 auto;
  z-index: 999999;
  display: none;
  position: fixed;
  left: 50%;
  margin-left: -50px;
}

ul li {
  list-style: none
}

.lightbox-background {
  display: none;
  background: rgba(0, 0, 0, 0.8);
  width: 100%;
  position: fixed;
  height: 100%;
  z-index: 1;
  top: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lightbox-content 1">TEST 1</div>
<div class="lightbox-content 2">TEST 2</div>
<div class="lightbox-content 3">TEST 3</div>
<div class="lightbox-content 4">TEST 4</div>

<ul class="accordion-content">
  <li>
    <a class="trigger-lightbox" href="#" data-index='1'><p>TRIGGER 1</p></a>
  </li>
  <li>
    <a class="trigger-lightbox" href="#" data-index='2'><p>TRIGGER 2</p></a>
  </li>
  <li>
    <a class="trigger-lightbox" href="#" data-index='3'><p>TRIGGER 3</p></a>
  </li>
  <li>
    <a class="trigger-lightbox" href="#" data-index='4'><p>TRIGGER 4</p></a>
  </li>
</ul>

<div class="lightbox-background"></div>

edited Feb 19, 2018 at 11:09

answered Feb 19, 2018 at 11:03

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

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

2 Comments

thibaultlgd Over a year ago

thanks its awesomel Is there any way to add the class 1 2 3, etc automatically via jquery using increment or other do you think ?? Thanks so much

Zakaria Acharki Over a year ago

Yes you could.. wait

Rory McCrossan · Accepted Answer · 2018-02-19 10:56:11Z

Firstly you're repeating the same id attribute across multiple elements which is invalid HTML. id must be unique. Use common classes to group elements instead.

To solve this issue, and make your code more DRY, you can use a data attribute on the trigger element which relates it to the target. This way you can have an infinite amount of HTML content without ever needing to amend the JS. Something like this:

$('.trigger').click(function() {
  $('.lightbox-background').add($(this).data('target')).fadeIn('slow');
});

$('.lightbox-background').click(function() {
  $(this).fadeOut('slow');
  $('.lightbox').fadeOut('slow');
});

.lightbox {
  background: white;
  padding: 50px;
  margin: 0 auto;
  z-index: 999999;
  display: none;
  position: fixed;
}

ul li {
  list-style: none
}

.lightbox-background {
  display: none;
  background: rgba(0, 0, 0, 0.8);
  width: 100%;
  position: fixed;
  height: 100%;
  z-index: 1;
  top: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lightbox" id="lightbox1">TEST 1</div>
<div class="lightbox" id="lightbox2">TEST 2</div>
<div class="lightbox" id="lightbox3">TEST 3</div>
<div class="lightbox" id="lightbox4">TEST 4</div>

<ul class="accordion-content">
  <li>
    <a href="#" class="trigger" data-target="#lightbox1">
      <p>TRIGGER 1</p>
    </a>
  </li>
  <li>
    <a href="#" class="trigger" data-target="#lightbox2">
      <p>TRIGGER 2</p>
    </a>
  </li>
  <li>
    <a href="#" class="trigger" data-target="#lightbox3">
      <p>TRIGGER 3</p>
    </a>
  </li>
  <li>
    <a href="#" class="trigger" data-target="#lightbox4">
      <p>TRIGGER 4</p>
    </a>
  </li>
</ul>


<div class="lightbox-background"></div>

Note that I amended the positioning of the lightbox in your CSS as it didn't work well in the snippet.

Andy · Accepted Answer · 2018-02-19 10:56:39Z

0

You can use data attributes. Each box and its corresponding trigger have the same identifier. Simply grab the id of the trigger when you click on it, and use it to fade in the right box.

$('.trigger-lightbox').on('click', function() {
  const id = $(this).data('id');
  $(`.box[data-id="${id}"]`).fadeIn('slow');
});

.box {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class="trigger-lightbox" data-id="1">Trigger one</a>
<a class="trigger-lightbox" data-id="2">Trigger one</a>

<div class="box" data-id="1">Box one</div>
<div class="box" data-id="2">Box two</div>

answered Feb 19, 2018 at 10:56

Andy

63.6k13 gold badges72 silver badges99 bronze badges

Collectives™ on Stack Overflow

Jquery if element has same class?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related