CODEWITHSUNDEEP
javascriptphpwordpress
Le Fem
Le Fem

Reputation: 109

Different functions for each post in loop wordpress

I have a wordpress loop that uses a template to echo my custom post type upon a page.

It echos the same class names and html structure but different content.

What I want to do is use javascript to add functionality like onmousemove to each post and display different content for each post echoed in the loop.

But the thing is that how can I target each post individually when they all have the same class names and the fact that the loop is done before the javascript can even exist so there is no reference.

Page Template

query_posts(array('post_type' => 'spark_stars'));  
if (have_posts()) :// Start the Loop.
while ( have_posts() ) : the_post();
get_template_part('content-stars', get_post_format());
endwhile;

Template Part: content-stars

<div class="entry-content">

    <div class='div' style='display:inline-block;'>
        <a href='<?php echo esc_url(get_permalink()); ?>'>
            <img style='display:block;' class='star' 
            src='<?php echo get_template_directory_uri() . "/images/star_0.png";?>'>
        </a>
        <div class='star_div_text' style='display:none;'>
            <p class='star_text'>
                <?php echo get_post_meta(get_the_ID(),'data_text', true);?>
            </p>
        </div>
    </div>

</div>

Enqueued Javascript

window.star1 = document.getElementsByClassName('star')[0];
star1.onmousemove = function(e)
{   
    // some functions that happen on star1
    // what about star2?
    // how will i reference that or even know how many stars are on the page
}

Upvotes: 0

Views: 221

Answers (6)

Le Fem
Le Fem

Reputation: 109

Thank you everyone for your help but I have found the solution.

First of all I calculated how many items had the same class names. Then I assigned an event listener to all of them. When the event handler was called I ran a loop to identify the caller. When the caller was identified I passed it to another function to handle it.

Something like this

Html

<!doctype html>
<html>
<body>
    <div class='a' style='width:100px; height:100px; background:orange;'></div>
    <div class='a' style='width:100px; height:100px; background:tomato;'></div>
</body>
</html>

Javascript

<script>
a = document.getElementsByClassName('a');
l = a.length;

for (var i = 0; i<l; i++)
{
    a[i].addEventListener('click',analyse); // add event to all classes
}

function analyse()
{
    for (var i = 0; i<l; i++)
    {
        if (this == a[i]) // is this the class that was clicked
        {
            var arg = this; // identified
            anotherFunc(arg);
        }       
    }
}

function anotherFunc(e)
{
    console.log(e); // The class that got clicked even though all have the same name
}
</script>

Upvotes: 0

Emeka Mbah
Emeka Mbah

Reputation: 17545

Why not use the post ID to reference the div you wish to manipulate via JavaScript

Example 1: I will create an ID for the target div in this naming convention : starPOSTID 

<div class='star_div_text' style='display:none;' id="star<?php echo get_the_ID(); ?>">
        <p class='star_text'>
            <?php echo get_post_meta(get_the_ID(),'data_text', true);?>
        </p>
</div>

so you can reference star1 in your javascript.

Example 2: Preferably i suggest you use Jquery to selector for this.

$("star_div_text").mousemove(function(){
  $("star_div_text").css("background-color","yellow");
});

You learn more about Jquery here : http://jquery.com/

Upvotes: 0

Daniel
Daniel

Reputation: 19

That might be true. If you want to be more specific you could also create a control. For example:

if($('#example').mouseover(function(){
// $(this).*function*();
)};

If you would like you could for example replace '#example' to an html tag like 'a'. Or if you want to use this on more tags $('#example','#anotherexample').mouseover(function(){ });

Upvotes: 0

Le Fem
Le Fem

Reputation: 109

In response to Daniel:

I understand but $(this) can mean anything. An event would be called if I mouseover anything. What I'm thinking of is something like 

mouseover{function(e){ // mouseover will know who called
var caller = e || this; // caller will be identified
anotherFunc(caller);  // target that caller
}}

Something like this, something dynamic, it should be.

Upvotes: 0

Prashant Tapase
Prashant Tapase

Reputation: 2147

You can use this example code

 <div class='star_div_text' id='abc' style='display:none;'>
       <p class='star_text'>
           <?php echo get_post_meta(get_the_ID(),'data_text', true);?>
        </p>
  </div>


window.star1 = document.getElementsByClassName('star')[0];
star1.onmousemove = function(e)
{   
   if(this.id == 'abc')
   {
       //do your code
    }
    else{
          //do your code
   }


}

Upvotes: 0

Daniel
Daniel

Reputation: 19

You could do this by using this. For example if you use jquery:

$(this).mouseover(function(){
// Function code
)};

That is something I would try if I were you.

Besides that you could alsy give an extra class/id so you can still select them individually.

Upvotes: 0

Related Questions