如何使用 jquery 仅显示隐藏的文本片段答案

【问题标题】：How to show only pieces of hidden text with jquery如何使用 jquery 仅显示隐藏的文本片段
【发布时间】：2013-04-09 17:04:36
【问题描述】：

我有一个带有日历和一堆“天气历史中的今天”信息的 html 文件。我想隐藏所有的天气历史，直到有人点击日历上的某一天，然后我只想显示那一天的历史。

每日天气信息被隐藏，但当它是日历日时，它不会显示特定日期。我假设我做错了。更好的解决方法将不胜感激。

日历日链接：

<td align="right"><a id="c0408" href="#"> 8</a></td>

天气历史：

<div id="allhistory">
  <div id="hc0408" style="display:none">
    <ul>
      <li class="dateheader">April 8, 2007</li>
      <li>The Savannah Airport drops to 28 degrees, its lowest April 
          temperature.</li>
      <li class="dateheader">April 8, 2007</li>
      <li>Summerville has their coldest April temperature, when the mercury 
          falls to 27 degrees.</li>
    </ul>
  </div>

  <div id="hc0409" style="display:none">
    <ul>
      <li class="dateheader">April 9, 2011</li>
      <li>Severe thunderstorms impact Berkeley County in South Carolina, 
          with hail as large as tennis balls (2.5 inches) and winds as 
          high as 64 mph.</li>
    </ul> <!-- 0409 -->
  </div>
</div> <!-- all history div -->

jQuery 代码：

<script>
  $(document).ready(function() { 
    $('#calendar a').click(function() {
      var dateid = $(this).attr('id');
      var selection = "div#h"+dateid;
      $("selection").show();
     })
  });
</script>

【问题讨论】：

"p#h"

标签： jquery show-hide

【解决方案1】：

试试这个：

$(document).ready(function() { 
    $('#calendar a').click(function(e) {
      e.preventDefault();
      $('#allhistory [id^="h"]').hide();
      $('#h'+$(this).attr('id')).css('display','inline-block');
     })
});

【讨论】：

太棒了！那行得通。现在，如果用户点击另一个日期，我只需要隐藏那里的内容。
@user2208943 你想要，然后他点击另一天你想隐藏旧的并显示刚刚按下的那一天吗？

【解决方案2】：

连接 id 并显示相应的 jquery 对象

试试这个

$('#calendar a').click(function(e) {
   e.preventDefault();  //to prevent the default behaviour of a
  var dateid = $(this).attr('id');
  var selection = $("#h"+dateid); //assign selection as jquery object
  selection.show(); //show it
  .....

【讨论】：

【解决方案3】：

$("selection").show();

这是你的问题。您正在提供字符串“selection”作为选择器。您想提供变量；像这样：

$(selection).show();

【讨论】：