Различные функции для каждого сообщения в цикле wordpress

Question

У меня есть цикл wordpress, который использует шаблон для эхо-типа моего настраиваемого типа сообщения на странице.

Это echos те же имена классов и html-структуры, но разные содержания.

Что я хочу сделать, это использовать javascript, чтобы добавить функциональность, например, onmousemove в каждое сообщение, и отобразить различный контент для каждого сообщения, эхом в цикле.

Но все дело в том, как я могу настроить таргетинг на каждое сообщение отдельно, когда все они имеют одинаковые имена классов и тот факт, что цикл выполняется до того, как javascript может даже существовать, поэтому ссылки нет.

Страница шаблона

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; 

часть шаблона: контент-звезды

<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> 

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 
} 

Answer 1

Вы мог бы сделать это, используя this. Например, если вы используете jquery:

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

Это то, что я хотел бы попробовать, если бы был вами.

Кроме того, вы можете добавить дополнительный класс/идентификатор, чтобы вы могли выбрать их отдельно.

Answer 2

Вы можете использовать этот пример кода

<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 
    } 


} 

Answer 3

В ответ Даниилу:

Я понимаю, но $ (это) может означать что угодно. Событие будет вызвано, если я что-нибудь начерняю. Я думаю о чем-то вроде

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

Что-то вроде этого, что-то динамичное, должно быть.

Answer 4

Это может быть правдой. Если вы хотите быть более конкретным, вы также можете создать элемент управления. Например:

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

Если вы хотели бы вы могли бы, например, заменить «#example» на тег HTML, как 'a'. Или, если вы хотите использовать это на более тегов $('#example','#anotherexample').mouseover(function(){ });

Answer 5

Почему бы не использовать почтовый идентификатор для ссылки на DIV вы хотите управлять с помощью JavaScript

Пример 1: я создать идентификатор для целевого DIV в этом соглашение об именовании: 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> 

, так что вы можете ссылаться на star1 в своем javascript.

Пример 2: Предпочтительно я предлагаю вам использовать Jquery для селектора.

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

Вы узнаете больше о Jquery здесь: http://jquery.com/

Answer 6

Спасибо всем за вашу помощь, но я нашел решение.

Прежде всего, я подсчитал, сколько предметов имели одинаковые имена классов. Затем я назначил прослушиватель событий всем из них. Когда обработчик события был вызван, я запустил цикл, чтобы идентифицировать вызывающего. Когда вызывающий был идентифицирован, я передал его другой функции для его обработки.

Что-то вроде этого

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>