jQuery, foreach loop gives me same output on both values

Question

Ok, now i have a new problem with this jQuery script. In my foreach loop, i fetch out the product name and so on. The thing is, i have 2 different products with 2 different descriptions. But this code:

<div class="wiki-content">
    <div class="box9">
        <h1>Sample Box</h1>   
        <img src="http://www.wpthemegenerator.com/wp-content/uploads/2012/06/Image.jpg">

        <?php
            echo $getTheOffer['wiki_text'];
        ?>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus consectetur dolor a porttitor. Curabitur id sem sed ante fringilla pulvinar et id lectus. Nullam justo ipsum, hendrerit ut commodo nec, pellentesque nec erat. Pellentesque pharetra.</p><br/>
 </div>
</div>

and this jQuery:

;(function($) {
// DOM Ready
$(function() {
    // Binding a click event
    // From jQuery v.1.7.0 use .on() instead of .bind()
    $('.wiki-button').bind('click', function(e) {
        // Prevents the default action to be triggered. 
        e.preventDefault();
        // Triggering bPopup when click event is fired
        $('.wiki-content').bPopup();
    });
});
})(jQuery);

Gives me same output on both. I gonna mention that it is popup dialog windows, when i try put this on a other row. Not inside this popup it works just fine. Thanks for any help! :)

EDIT,

I change the popup windows from class to id and now it shows the 2 different texts. But not right. product nr 2 shows product nr 1s text. and product nr 2 shows product nr 1s text.

So you have 2 buttons and by clicking on them bPopup() only works the first element with className of 'wiki-content'? Can you reproduce the problem on jsfiddle.net? — Ram
– Ram, Commented Dec 30, 2013 at 19:31

Neil · Accepted Answer · 2013-12-30 20:09:44Z

1

You have to specify which .wiki-content you want to display depending on the button that you click. If the buttons and the contents are in table rows, you could do something like this

$('.wiki-button').bind('click', function(e){
  var $tr = $(e.currentTarget).closest('tr'), 
      $content = $tr.find('.wiki-content');

  $content.bPopup();
});

This will find the content that lives in the same row.

answered Dec 30, 2013 at 20:09

Neil

8721 gold badge8 silver badges14 bronze badges

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

Collectives™ on Stack Overflow

jQuery, foreach loop gives me same output on both values

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related