Question

我的方案如下。我有7个标签（每天一个）使用bootstrap。我想在页面加载时加载所有7天的信息。

<ul class='nav nav-tbs'>
  <li><a id='monday'>Monday</a></li>
  <li><a id='tuesday'>Tuesday</a></li>
  <li><a id='wednesday'>Wednesday</a></li>
  <li><a id='thursday'>Thursday</a></li>
  <li><a id='friday'>Friday</a></li>
  <li><a id='saturday'>Saturday</a></li>
  <li><a id='sunday'>Sunday</a></li>
</ul>

理想情况下，点击日期标签后，您只会显示日期信息。每个“每日页面”都相当复杂。

<div class='row'>
  <div class='span12'>
    <legend>Breakfast</legend>
  </div>
</div>

<div class='row'>
  <div class='span5 bfood'>
    <h3>{{ bname }}</h3>
    <img src='{{bimg }}'>
    <ul>
      {% for ing in bing %}
      <li>{{ ing }}</li>
      {% endfor %}
    </ul>
  </div>
  <div class='span6'>
    <div class='well'>
      <form>
        {{ csrf_token }}
        <h2>Doesn't sound good?</h2>
        <p>
        <h3>Breakfast Food:</h3>
        <input type='text' value='{{ bfood }}' id='bfood'>
        </p>
        <p>
        <h3>Breakfast Required:</h3>
        {% for breq in br %}
        <div class='input-append'>
          <input type='text' name='br' value='{{ breq }}'>
          <button class='btn btn-danger rmv'><i class='icon-minus'></i></button>
        </div>
        {% endfor %}
        <button class='btn btn-success add' id='br'><i class='icon-plus'></i></button>
        </p>
        <p>
        <h3>Breakfast Forbidden:</h3>
        {% for bfor in bf %}
        {% if bfor != '' %}
        <div class='input-append'>
          <input type='text' name='bf' value='{{ bfor }}'>
          <button class='btn btn-danger rmv'><i class='icon-minus'></i></button>
        </div>
        {% endif %}
        {% endfor %}
        <button class='btn btn-success add' id='bf'><i class='icon-plus'></i></button>
        </p>
        <button class='btn new-recipe' id='b'>Try again</button>
        <div id='result'></div>
      </form>
    </div>
  </div>
</div>
<div class='row'>
  <div class='span12'>
    <legend>Lunch</legend>
  </div>
</div>
<div class='row'>
  <div class='span5 lfood'>
    <h3>{{ lname }}</h3>
    <img src='{{ limg }}'>
    <ul>
      {% for ing in ling %}
      <li>{{ ing }}</li>
      {% endfor %}
    </ul>
  </div>
  <div class='span6'>
    <div class='well'>
      <form>
        {{ csrf_token }}
        <h2>Doesn't sound good?</h2>
        <p>
        <h3>Lunch Food:</h3>
        <input type='text' value='{{ lfood }}' id='lfood'>
        </p>
        <p>
        <h3>Lunch Required:</h3>
        {% for lreq in lr %}
        <div class='input-append'>
          <input type='text' name='lr' value='{{ lreq }}'>
          <button class='btn btn-danger rmv'><i class='icon-minus'></i></button>
        </div>
        {% endfor %}
        <button class='btn btn-success add' id='lr'><i class='icon-plus'></i></button>
        </p>
        <p>
        <h3>Lunch Forbidden:</h3>
        {% for lfor in lf %}
        {% if lfor != '' %}
        <div class='input-append'>
          <input type='text' name='lf' value='{{ lfor }}'>
          <button class='btn btn-danger rmv'><i class='icon-minus'></i></button>
        </div>
        {% endif %}
        {% endfor %}
        <button class='btn btn-success add' id='lf'><i class='icon-plus'></i></button>
        </p>
        <button class='btn new-recipe' id='l'>Try again</button>
      </form>
    </div>
  </div>
</div>
<div class='row'>
  <div class='span12'>
    <legend>Dinner</legend>
  </div>
</div>
<div class='row'>
  <div class='span5 dfood'>
    <h3>{{ dname }}</h3>
    <img src='{{ dimg }}'>
    <ul>
      {% for ing in ding %}
      <li>{{ ing }}</li>
      {% endfor %}
    </ul>
  </div>
  <div class='span6'>
    <div class='well'>
      <form>
        {{ csrf_token }}
        <h2>Doesn't sound good?</h2>
        <p>
        <h3>Dinner Food:</h3>
        <input type='text' value='{{ dfood }}' id='dfood'>
        </p>
        <p>
        <h3>Dinner Required:</h3>
        {% for dreq in dr %}
        <div class='input-append'>
          <input type='text' name='dr' value='{{ dreq }}'>
          <button class='btn btn-danger rmv'><i class='icon-minus'></i></button>
        </div>
        {% endfor %}
        <button class='btn btn-success add' id='dr'><i class='icon-plus'></i></button>
        </p>
        <p>
        <h3>Dinner Forbidden:</h3>
        {% for dfor in df %}
        {% if dfor != '' %}
        <div class='input-append'>
          <input type='text' name='df' value='{{ dfor }}'>
          <button class='btn btn-danger rmv'><i class='icon-minus'></i></button>
        </div>
        {% endif %}
        {% endfor %}
        <button class='btn btn-success add' id='df'><i class='icon-plus'></i></button>
        </p>
        <button class='btn new-recipe' id='d'>Try again</button>
        <div id='result'></div>
      </form>
    </div>
  </div>
</div>

隐藏/显示以上各项的最佳策略是什么？作为旁注，我还想降低“单一”页面的复杂性，因为它很长并且有很多重复的东西。

Answer 1

将每一堆日代码包裹在一个元素中，例如......

<div id="section_monday">
  //all code for monday
</div>

然后像这样使用JQuery ......

$(".nav nav-tbs").find("a").click(function(e){
   e.preventDefault();

   var id = "section_" + $(this).attr("id");

   $("#" + id).toggle();//will turn sections on/off with each click
});

Answer 2

使用jQuery，只需show，hide或toggle页面上的任何元素即可。

Answer 3

我建议你做以下事情：

为每个重复的内容创建函数，以便您拥有“更清晰”的代码
还可以减少工作量
将每天的内容放入单独的div中，并在加载后显示当前日期的div或符合您需求的内容
然后点击切换显示隐藏在所需的div

Answer 4

我建议您使用.toggleClass( function(index, class, switch) [, switch] )

function返回要在匹配集中的每个元素的class属性中切换的类名。

switch一个布尔值，用于确定是应该添加还是删除类。

这里有完整的文档http://api.jquery.com/toggleClass/

根据部分隐藏和显示信息

4 个答案: