如何使用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 what thechosenone 中所述，我的猜测是当您选择一个框时，它现在被称为已选择的框）：

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>

谁能告诉我我应该如何调用这个函数并将它添加到一个文本块中？我只是希望当有人单击它时，此框或其他内容会下拉并显示其他信息，当您单击另一行文本时，此窗口将向上滚动，而另一个将下拉。

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匹配的div

我为所有links 提供了相同的class，这样我们就可以为所有链接设置一个onclick 事件。

包含您的内容的所有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))

请注意，因为我们为所有 elements 和 class = "newboxes" 使用了 onclick 事件 我们现在可以使用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)