0

这是一个很简单的问题。Twitter bootstrap 和 CSS 的基础知识。我正在尝试通过计算列表中的当前月份和另外 3 个月来选择表格来将数据添加到下拉菜单中。

    <ul class="dropdown-menu">
        <li><a href="#">Month 1</a></li>            
        <li><a href="#">Month 2</a></li>
        <li><a href="#">Month 3</a></li>
        <li><a href="#">Month 4</a></li>
    </ul>



  var d=new Date();
  var month=new Array();
  month[d.getMonth()+1];
  month[d.getMonth()+2];
  month[d.getMonth()+3];

关于如何将这些值加载到下拉菜单中的任何想法？

编辑

    <!DOCTYPE html>

    <html lang="en">
    <head>
    <style type="text/css">


    #dd1{
       margin-left:auto;
   margin-right:auto;
   width:70%;
}


</style>
<title>Drop Down Navbar</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">  </script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript">

var items = $("#dd2");
var d=new Date();
var month=new Array();
month[d.getMonth()];
month[d.getMonth()+1];
month[d.getMonth()+2];
month[d.getMonth()+3];
for(i=0; i<month.length; i++)
   $(items[i]).html(month[i]);


</script>
    </head>
    <body>

<div class="container">
    <div class="row">
        <div class="span12">
            
            <h3>Google App Analytics</h3>
                    
                    
                    <ul class="nav nav-tabs">
                         <li><a href="#home" data-toggle="tab">Monthly Analysis</a></li>
                         <li><a href="#profile" data-toggle="tab">Compare Months</a></li>
                    </ul>
                    <li id='dd1' class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                Choose Month <b class="caret"></b>
                            </a>
                            
                            <ul id='dd2' class="dropdown-menu">
                                
                            </ul>
                            
                        </li>
            
        </div>
    </div>
</div>
4

2 回答 2

1

您做错的基本事情是创建数组。您应该提供一个索引和值来创建一个有效的 javascript 数组，如下所示：

month[0] = curMonth;
month[1] = curMonth+1;
month[2] = curMonth+3;
month[3] = curMonth+2;

我确实存储了当前月份，因此您不必一遍又一遍地调用您的 Date 对象：

var curMonth = d.getMonth();。

您可以通过循环使其更具动态性：

for(i=0; i< 4; i++)
{
    month[i] = curMonth+i;
}

所以现在你有一个包含 4 个值的数组。您希望在某个<ul>具有 id 的情况下使用它#dd2。我不确定你为什么要为元素添加索引值，但你可以只调用 id 元素。ID 首先是唯一的，因此不应有任何其他元素具有此 ID。

现在还有什么问题是你一直用.html()覆盖放置的内容，你实际上想在每次迭代时扩展它。您可以为此使用.append()：

for(i=0; i<month.length; i++)
{
   $("#dd2").append('<li>' + month[i] + '</li>');
}

jsFiddle

我希望这就是你的意思。

于 2013-10-29T15:38:02.700 回答
1

您需要将 jquery 包装在这样的函数中。

$(document).ready(function(){ // Code goes here. });

你也需要像这样分配你的数组。

var month = new Array();
month[0] = "someValue";

尝试下面的代码也是一个jsfiddle 示例

<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
 #dd1
 {
  margin-left:auto;
  margin-right:auto;
  width:70%;
 }
 </style>
<title>Drop Down Navbar</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">  </script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var d=new Date();

var month=new Array();
month[0] = [d.getMonth()];
month[1] = [d.getMonth()+1];
month[2] = [d.getMonth()+2];
month[3] = [d.getMonth()+3];

for(i=0; i<month.length; i++)
   $("#dd2").append("<li><a href=''>"+month[i]+"</a></li>");
});
</script>
</head>
<body>
<div class="container">
  <div class="row">
    <div class="span12">
       <h3>Google App Analytics</h3>
           <ul class="nav nav-tabs">
              <li><a href="#home" data-toggle="tab">Monthly Analysis</a></li>
              <li><a href="#profile" data-toggle="tab">Compare Months</a></li>
              <li id='dd1' class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Choose Month <b class="caret"></b></a>
                <ul id='dd2' class="dropdown-menu"></ul>
             </li>
           </ul>
        </div>
    </div>
</div>
于 2013-10-28T20:54:55.533 回答