Question

我有一个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
}

Answer 1

您可以使用this执行此操作。例如，如果您使用jquery：

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

如果我是你，那就是我会尝试的。

除此之外，你可以提供额外的课程/ ID，这样你仍然可以单独选择它们。

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

回应丹尼尔：

我理解，但$（this）可能意味着什么。如果我将鼠标移到任何地方，将调用一个事件。我想到的是像

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'替换为'a'等html标记。或者，如果您想在更多代码$('#example','#anotherexample').mouseover(function(){ });

上使用此功能

Answer 5

为什么不使用帖子ID来引用您希望通过JavaScript操作的div

示例1：我将在此命名约定中为目标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/

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>

循环wordpress中每个帖子的不同功能

6 个答案: