PHP foreach function doesnt work with my jquery code

Question

I have written this jquery code:

$(document).ready(function(){

var info = $('.info').detach();

$('.des').click(function(){
    score = score + 1;
    played = played + 1;
    $('.kreis').addClass("borderGreen");
    $('.foto').hide();
    $('.kreis').append(info);
});

$('.pro').click(function(){
    played = played + 1;
    $('.kreis').addClass("borderRed");
    $('.foto').hide();
    $('.kreis').append(info);

    console.log('score:' + score);
    console.log('played:' + played);
});

$('.frage').mouseenter(function(){
    $(this).fadeTo(460, 0.7);
});

$('.frage').mouseleave(function(){
    $(this).fadeTo(350, 0);
});

});

to achieve something like this!

then I wrote the following php code to loop through that "function"

    <?php foreach ($objects as $object){ ?>

        <div class="kreis">
            <div class="info" >
                <div class="infobox">
                    <p style="padding-bottom:15px;border-bottom:1px solid #545454;"><?php echo $object["name"]; ?></p> <bl/>
                    <p style="font-weight:200;"><?php echo $object["position"]; ?></p>
                </div>
                <div class="social">
                    <a href="<?php echo $object["twitter"]; ?>"><img src="img/twitter.png" style="width:45px;margin-left:35px;padding-right:12px;"></a>
                    <a><img src="img/dribbble.png" style="width:45px;"></a>
                </div>
            </div>  
                <div class="foto" style="background-image:url('<?php echo $object["img"]; ?>'); ">
                    <div class="frage">
                        <div class="des box"><p>AAAAA</p></div>
                        <div class="pro box" style="margin-top:6%;"><p>BBBBB</p></div>
                    </div>
                </div>
        </div> <?php } ?>

Now the problem is, that if you click the .des or .pro object, jquery hides the layer of every object. Is there a way I can achieve what I want to do with jquery or do I have to use javascript or some other language? What is the most elegant way to solve this?

You only have one variable holding the detached .info element, so this will never work with multiple instances of the above markup no matter how you twist and turn it. — adeneo
– adeneo, Commented Mar 29, 2014 at 18:13
So you have a variable called $object that is an array? WHAT function are you looping through?? You need to be way more specific. JavaScript manipulates DOM. PHP generates HTML markup the server serves up to the client which jquery can maniputlate. Please be more specific. — Kevin Florida
– Kevin Florida, Commented Mar 30, 2014 at 7:06

friedi · Accepted Answer · 2014-03-29 18:22:12Z

1

jQuery is perfect for this job. You can go with it. But you have to change that only the current object in the click listener gets changed and not all of your objects. Try this:

$('.des').click(function(){
    var $this = $(this);

    score = score + 1;
    played = played + 1;
    $this.closest('.kreis').addClass("borderGreen").append(info);
    $this.closest('.foto').hide();
});

$('.pro').click(function(){
    var $this = $(this);

    played = played + 1;
    $this.closest('.kreis').addClass("borderRed").append(info);
    $this.closest('.foto').hide();

    console.log('score:' + score);
    console.log('played:' + played);
});

answered Mar 29, 2014 at 18:22

friedi

4,3601 gold badge15 silver badges19 bronze badges

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

2 Comments

losc13 Over a year ago

thank you for your help, but now the info class gets added to every object and not only to the closest one.

friedi Over a year ago

no, it will only be added to the closest element with the class kreis, because of function chaining. Take a look at w3schools.com/jquery/jquery_chaining.asp. By the way a dom instance can only be the child of one parent dom object. So it is impossible, that there are multiple elements of the same instance in the dom tree.

Collectives™ on Stack Overflow

PHP foreach function doesnt work with my jquery code

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related