循環wordpress中每個帖子的不同功能

我有一個wordpress循環，它使用模板在頁面上回顯我的自定義帖子類型。循環wordpress中每個帖子的不同功能

它迴應相同的類名稱和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 
}

來源

2014-09-19 Le Fem

**傳值**，你可以實現你的目標...'onmousehove {功能（ $ i）}' – 2014-09-19 11:22:29

你可以證明，因爲'star1'只在調用它自己的事件時被調用。當事件啓動並引用'star1'時，你怎麼能通過任何地方？ – 2014-09-19 11:26:08

好的。你可以使用**'id' **作爲'mousehover'函數而不是類 – 2014-09-19 11:31:09

你可以通過使用this來做到這一點。例如，如果你使用jQuery：

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

這是我會嘗試，如果我是你。

除此之外，你可以alsy給一個額外的類/ ID，所以你仍然可以單獨選擇它們。

來源

2014-09-19 11:27:22 Daniel

您可以使用此示例代碼

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


}

來源

2014-09-19 11:37:40

感謝您的貢獻。但我使用WordPress，所有這些都是爲了自我管理，所以我避免使用這種方法，因爲我甚至不知道頁面上有多少顆星。一切都是動態的。 – 2014-09-19 11:45:19

你可以用id做動態的方式....用變量代替靜態。 – 2014-09-19 11:48:30

迴應丹尼爾：

我理解，但$（這）可能意味着什麼。如果我將鼠標懸停在任何事物上，將會調用一個事件我在想的是類似於

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

就像這樣，一些動態的，它應該是。

來源

2014-09-19 11:41:14

這可能是對的。如果你想更具體一些，你也可以創建一個控件。例如：

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

如果你想，你可以例如替換「＃示例」到HTML標記像'a'。或者，如果你想使用這個更多的標籤$('#example','#anotherexample').mouseover(function(){ });

來源

2014-09-19 11:53:09 Daniel

爲什麼不使用文章ID引用您希望通過JavaScript

例1操縱DIV：我會爲這個目標DIV的ID命名約定：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>

所以你可以在你的javascript中引用star1。

例2：最好我建議你使用jquery來選擇這個。

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

您瞭解jQuery的位置：http://jquery.com/

來源

2014-09-19 12:01:18 Digitlimit

謝謝大家的幫助，但我已經找到了解決辦法。

首先，我計算了多少項具有相同類名。然後我爲它們分配了一個事件監聽器。當事件處理程序被調用時，我運行了一個循環來標識調用者。當調用者被識別時，我將它傳遞給另一個函數來處理它。

像這樣的事情

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

來源

2014-09-19 13:27:04

但是你怎麼能單獨識別每個帖子上的目標？[JSFIDDLE]（http://jsfiddle.net/prashantptapase/jmhkh11d/）..在警報中它不能識別？ – 2014-09-21 09:51:46

我通過'function analyze（）'中的** if語句**單獨標識每個帖子。所以當一個事件被調用時，儘管它們都具有相同的事件調用者，但它只發生在一個元素上。我在[JSFIDDLE]（http://jsfiddle.net/prashantptapase/jmhkh11d/）中查看了你的代碼，並且出現了一個錯誤。將鼠標懸停更改爲鼠標懸停。 – 2014-09-22 09:31:20

夥計，編輯的鏈接不工作。我同意你的觀點，它只發生在一個元素上。但你怎麼能做到這一點..星1 - > funtion1（），star2 - > function2（）..每個職位。 – 2014-09-23 06:17:24

循環wordpress中每個帖子的不同功能

回答

相關問題