Question

我一直在搜索并尝试几天没有任何成功的片段。我对Javascript几乎一无所知，虽然我可以接近，但我根本无法实现我追求的目标。我需要一个链接/按钮，单击时将切换下面div的可见性，并将文本从+更改为 - （或显示隐藏）。我有显示切换工作，但我无法同时更改文本。例如：

<script type="text/javascript">
function toggleDiv(divId) {
   jQuery("#"+divId).toggle();
}
</script>

<a href="javascript:toggleDiv('hidden1');" class="button" >+</a> Day 1
<div id="hidden1" style="display:none;">
Day 1 Details
</div>

<a href="javascript:toggleDiv('hidden2');" class="button">+</a> Day 2
<div id="hidden2" style="display:none;">
Day 2 Details
</div>

注意：我在wordpress网站上这样做，如果这有所不同（我相信我不能使用$）。我只想在特定页面上加载，这就是为什么我自己尝试而不是使用插件。我在上面的例子中有两个div，但实际上我会有大约30个，所以不想指定确切的ID。谢谢！

Answer 1

您可以执行以下操作：

$(document).ready(function(){
  $('.button').click(function(){
   id = $(this).attr('title');
   txt = $(this).text();
   if (txt == '+'){
     $(this).text('-');
   }
   else{
      $(this).text('+');
   }
   $("#"+id).toggle();

  })

});

HTML

<a class="button" title="hidden1" >+</a> Day 1
<div id="hidden1" style="display:none;">
Day 1 Details
</div>

<a class="button" title="hidden2">+</a> Day 2
<div id="hidden2" style="display:none;">
Day 2 Details
</div>

结帐DEMO

Answer 2

没有汗水。

<script type="text/javascript">
function toggleDiv(divId) {
   var div=jQuery("#"+divId),
   t=div.prev().children().first();
   div.toggle();
   t.text(t.text()=="+"?"-":"+");
}
</script>

<a href="javascript:toggleDiv('hidden1');" class="button" >+</a> Day 1
<div id="hidden1" style="display:none;">
Day 1 Details
</div>

<a href="javascript:toggleDiv('hidden2');" class="button">+</a> Day 2
<div id="hidden2" style="display:none;">
Day 2 Details
</div>

或者，如果您根本不想要麻烦，请尝试以下方法：

<script type="text/javascript">
jQuery(function(){
    jQuery('.button').each(function(){
        var t=jQuery(this);
        t.parent().next().toggle();
        t.text(t.text()=="+"?"-":"+");
    });
});
</script>

<a href="javascript:void()" class="button" >+</a> Day 1
<div id="hidden1" style="display:none;">
Day 1 Details
</div>

<a href="javascript:void()" class="button">+</a> Day 2
<div id="hidden2" style="display:none;">
Day 2 Details
</div>

此外，如果你想成为一个坏男孩，你可以随时使用window.$=jQuery;开始你的脚本，然后你可以在你的代码中使用$。

jQuery切换显示/隐藏多个div并更改文本

2 个答案: