如何使用javascript在wordpress（隐藏div）上添加隐藏文本

Question

好吧，所以基本上我一直在寻找一种方式，当有人点击一个文本，一个向下滚动菜单下降基本上更多的信息（有点像阅读更多 ）。

我在Java或Jquery方面的经验不多，我甚至不知道问题在哪里，在我的functions.php或我的脚本本身。我做了大量的研究，并尝试了很多东西，但似乎没有人能够帮助我，所以我想编号做我自己的帖子。

请我，我把大部分的代码的其他成员给出的模板，并试图修改代码，以便它与我的网站，我试图完成类似这个网站的一些工作：http://www.randomsnippets.com/2011/04/10/how-to-hide-show-or-toggle-your-div-with-jquery/第二个例子有3个盒子，只有一个出现，当你点击它，但我的将只是文本而不是盒子）

我的Javascript文件看起来像这样（如注释idk whatchosenone是什么，我的猜测是什么时候你选择一个框，它现在被称为所选的一个）：

jQuery(document).ready(function(){ 
    $('.newboxes').each(function(index) { 
      if ($(this).attr("id") == thechosenone) { 
       $(this).show(200); 
      } 
      else { 
       $(this).hide(600); 
      } 
    }); 
}(jQuery) 

所以我说干就干，修改了我的function.php并添加这些代码行：

add_action('wp_enqueue_scripts', 'showonlyone'); 

function showonlyone() { 
    wp_enqueue_script('showonlyone', get_template_directory_uri() . "/js/showonlyone.js"); 
} 

至于调用Java脚本到我的WordPress页面我不知道如何做到这一点。模板给了我这样的事情：

<table> 
    <tr> 
     <td> 
     <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;"> 
      <a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a> 
     </div> 
     <div class="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div> 
     </td> 
     <td> 
     <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;"> 
      <a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a> 
     </div> 
     <div class="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #2</div> 
     </td> 
     <td> 
     <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;"> 
      <a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a> 
     </div> 
     <div class="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #3</div> 
     </td> 
    </tr> 
</table> 

是否有人可以告诉我应该IM如何调用这个函数，并把它添加到文本块？我只是希望当有人点击它时，这个框或任何东西，下拉并显示额外的信息，当你点击另一行文本时，这个窗口将向上滚动，而另一行将下降。

Answer 1

花了一分钟，但在这里你去：

http://jsfiddle.net/V4DTZ/

现在，怎么回事代码：

<table> 
    <tr> 
     <td> 
     <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;"> 
      <a class="newboxes" href="#" id="newboxes1">show this one only</a> 
     </div> 
     <div class ="div_newboxes" id="div_newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div> 
     </td> 
     <td> 
     <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;"> 
      <a class="newboxes" href="#" id="newboxes2" >show this one only</a> 
     </div> 
     <div class ="div_newboxes" id="div_newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #2</div> 
     </td> 
     <td> 
     <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;"> 
      <a class="newboxes" href="#" id="newboxes3" >show this one only</a> 
     </div> 
     <div class ="div_newboxes" id="div_newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #3</div> 
     </td> 
    </tr> 

你会看到，我改变id指向其对应的div，并且我在div的ID上添加了div_前缀。

这样，我们有一个简单的方法来选择与link

我给所有的links相同class的，这样我们就可以建立一个onclick事件的所有环节相匹配的div。

包含您的内容的所有div也有相同的class，所以我们可以一次全部切换它们。

这里是jQuery的：

jQuery(document).ready(function(){ 
    $('.newboxes').on('click', function(){ 
    var div_id = "#div_" + $(this).prop('id'); 
     $('.div_newboxes').each(function(i, value){ 
       if($(value).prop('id')=== $(div_id).prop('id')){ 
        $(div_id).show(200); 
       } 
       else{ 
        $(value).hide(600); 
       } 
     }); 
    }) 
}(jQuery)) 

注意，因为我们使用的onclick事件为所有elements与class = "newboxes" 我们现在能够使用this指特定调用元素。现在不需要有变量theChosenOne。

Answer 2

1. 当准备好文档后，把事件处理程序所需的所有
2. 事件处理程序的元素被称为每次点击发生在这些元素

事件处理程序

时间

var ShowHideBlocks = function(){ 
$('.newboxes').each(function(index) { 

     if ($(this).attr("id") == thechosenone) { 
      $(this).show(200); 
     } 
     else { 
      $(this).hide(600); 
     } 
}); 

} 

附加到所有感兴趣的元素

jQuery(document).ready(function(){ 

    $('.newboxes').each(function(index) { 
     $(this).bind('click',function(){ 
      thechosenone = $(this).attr(id); //thechosenone is a global variable 
      ShowHideBlocks(); // Invoke the showHide method as part of anonymous handler 
     }); 
    } 
    }); 
}(jQuery)