Incrementing +1 the class in javascript

Question

Hi im doing a PHP loop where I set a class, this loop make a list of items, and each one of them will have a "share" button that will open a window, (div display:none) the javascript open this div, and it works perfect..

My problem is that in this moment I have inserted the <script> code inside the loop so each item has its own <script></script> code...

Is there any way to do just one and take that code out of the php loop, so I can improve the code.

  <script>
  $('a.sharebtnc').click(
            function(event) {
                event.stopPropagation();
                $('div.redescompartir').fadeToggle(300);

            }
        );
  </script>

In the Loop well I just add to the class the id like this (id :32 )

  <script>
  $('a.sharebtnc32').click(
            function(event) {
                event.stopPropagation();
                $('div.redescompartir32').fadeToggle(300);

            }
        );
  </script>

How can I make this script works for all elements no matter the id number, I have no idea, but I know this is the correct way of doing this , right?

The HTML is very simple, its the same for each item... I mean each item has its own div with for <a href="" > </a> elements

<a href="#" class="sharebtnc(id)"> 
<div class="redescompartir(id)">
<a href="" >Twitter </a>
<a href="" >Facebook </a>
<a href="" >Google </a>
<a href="" >Foursquare </a>
</div>

What's the DOM look like? Is the input a child, parent, or sibling of the div? The right way to do this is to use this to refer to the clicked element, then traverse to the target you want to toggle. — nrabinowitz
– nrabinowitz, Commented Sep 28, 2013 at 0:04
the div is a normal div i will paste my code, but its a normal div with four a href elements. — Moncho Chavez
– Moncho Chavez, Commented Sep 28, 2013 at 0:20

Arun P Johny · Accepted Answer · 2013-09-28 02:25:01Z

2

Add a new class and attribute to the input element like

instead of

<a class="sharebtnc32" />

use

<a class="sharebtnc sharebtnc32" data-id="32"/>

then

jQuery(function ($) {
    $('.sharebtnctl').click(function (event) {
        event.stopPropagation();
        $('.redesopenclose' + $(this).data('id')).fadeToggle(300);
    });
})

edited Sep 28, 2013 at 2:25

answered Sep 28, 2013 at 0:05

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

9 Comments

Moncho Chavez Over a year ago

Sorry maybe i didnt make the right question , the class attribute its done in php loop so i get like 80 classes for example, with the class sharebtnid... (example sharebtn32 sharebtn33 etc) i need a universal code for all of them to save lines in the javascript

Arun P Johny Over a year ago

@MonchoChavez still you can have multiple classes for a element

Moncho Chavez Over a year ago

i didnt see the last part, will acept in a min

Arun P Johny Over a year ago

@MonchoChavez see jsfiddle.net/arunpjohny/xX7A6/1 the class name redescompartir113 should be redesopenclose113

Arun P Johny Over a year ago

@MonchoChavez your script should be within a dom ready handler... see the update

|

Bavell · Accepted Answer · 2013-09-28 01:06:25Z

1

My preferred method: PHP to generate link between the two elements, then a small snippet of JS to grab which particular one was clicked.

PHP:

$num = 100;

for ($x = 0; $x < $numItems; $x++) {
    echo "
    <a href='#' class='sharebtn' target='$x'>Share</a>

    <div class='redescompartir' id='$x'>
    <a href=''>Twitter</a>
    <a href=''>Facebook</a>
    <a href=''>Google</a>
    <a href=''>Foursquare</a>
    </div>
    ";

}

HTML output:

<a href="#" class="sharebtn" target='32'>Share</a>

<div class="redescompartir" id='32'>
<a href="" >Twitter </a>
<a href="" >Facebook </a>
<a href="" >Google </a>
<a href="" >Foursquare </a>
</div>

JS:

$('a.sharebtn').on('click', function(e) {
    e.stopPropagation();
    var target = $(e.currentTarget).attr('target');
    $('#'+target).fadeToggle(300);
});

This way you only need a single <script></script> tag, which your user's broswers will thank you for. :)

answered Sep 28, 2013 at 1:06

Bavell

5005 silver badges10 bronze badges

1 Comment

Moncho Chavez Over a year ago

Thanks i will test i already have the PHP working fine :D, i know php my problem its with java thanks let me try

Collectives™ on Stack Overflow

Incrementing +1 the class in javascript

2 Answers 2

9 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related