自动创建按钮并将其制作成手风琴

问题描述 投票：2回答：2

我有这个功能，创建按钮，它取决于它是什么月份。如果是二月，那么28个按钮，三月，那么31个按钮等等。然后我有这个创造手风琴的功能。但是，我的问题是我无法连接它们。我希望javascript创建的按钮可以作为手风琴使用。不太确定如何做到这一点。所以我的问题是如何使用我的函数将手风琴用于根据月份创建的按钮？ 下面的代码片段和按钮的jsfiddle：https://jsfiddle.net/20psfauc/6/

按钮的功能和html：

var showDate = new Date();
var months = ["Januari", "Februari", "March", "April", "May", "June",
              "July", "Augusti", "September", "October", "November", "December"];
var weeks = ["Sunday","Monday","Tuseday","Wednesday","Thursday","Friday","Saturday"];



function drawTable(forDate) {
    var daysInMonth = new Date(forDate.getFullYear(),forDate.getMonth()+1,0).getDate();
    var cellsToDraw = daysInMonth;
    var newdate = forDate.getFullYear() +"-"+ ("0"+ (forDate.getMonth() + 1)).slice(-2);
    var table = document.getElementById("table");
    table.innerHTML = "";
    for (var r = 0; r < (daysInMonth / 7); r++) {
        var newRow = document.createElement("tr");
        table.appendChild(newRow);
        for (var c = 0; c < 31 && cellsToDraw > 0; c++) {
            var day1 = ("0" + (c + 1)).slice(-2);
            var textarea = document.createElement('button')
            textarea.setAttribute("placeholder", day1 );
            textarea.setAttribute("class", "row");
            //textarea.setAttribute("id", some_value);
            newRow.appendChild(textarea);
            textarea.setAttribute("name", "day");
            textarea.setAttribute("day",  newdate + "-" + day1 );
            textarea.innerHTML = newdate + "-" + day1;
            cellsToDraw--;
        }
    }
}

window.onload = function() {
    document.getElementById("displayingMonth").innerHTML = months[showDate.getMonth()];
    drawTable(showDate );
};

function next() {
    if (showDate.getMonth() == 11) {
        showDate.setMonth( 0 );
        showDate.setFullYear( showDate.getFullYear()+1 );
    } else {
        showDate.setMonth( showDate.getMonth()+1 );
    }
    document.getElementById("displayingMonth").innerHTML = months[showDate.getMonth()];
    drawTable( showDate );
}
  function daysInMonth(month, year) {
         var days;
         switch (month) {
           case 1: // Feb, our problem child
           var leapYear = ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);
           days = leapYear ? 29 : 28;
           break;
           case 3:
           case 5:
           case 8:
           case 10:
           days = 30;
           break;
           default:
           days = 31;
          }
          return days;
        }

      <h1 id="displayingMonth"></h1>
  <table id="table" cellspacing="0" cellpadding="0"   border-collapse="collapse";>

手风琴的功能

  

 var acc = document.getElementsByClassName("row");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    var panel = this.nextElementSibling;

    var active = checkIfAnyVisible();
    if (active) {
      active.className = 'panel';
      active.style.maxHeight = null;
    }

    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
      panel.className = 'panel';
    } else if (!checkIfAnyVisible()) {
      panel.style.maxHeight = panel.scrollHeight + "px";
      panel.className = 'panel active';
    }
  });
}

function checkIfAnyVisible() {
  for (var i=0; i<acc.length; i++) {
    if (acc[i].nextElementSibling.className.includes('active')) {
      return acc[i].nextElementSibling;
    } else {
      continue;
    }
  }
  return false;
}
.row {
  color: grey;
  width: 13%;
  transition: 0.4s;
  margin: 0 auto;
}

.panel {
  max-height: 0;
  transition: max-height 0.2s ease-out;
  overflow: hidden;
  width: 100px;
  float: left;
  background-color: yellow;
}
<button class="row"> 1</button>
<div class="panel">
  <p>1 content</p>
</div>

<button class="row"> 2</button>
<div class="panel">
  <p>2 content </p>

</div>

<button class="row"> 3</button>
<div class="panel">
  <p>3</p>

所有帮助表示赞赏！ :)

javascript html
2个回答
0
投票

我结合了这个功能并做了一些小的调整。这是你的意思吗？

<!doctype html>
  <html>
    <head>
      <style>
        .row { color: grey;  width: 13%;  transition: 0.4s;  margin: 0 auto;}
        .panel { max-height: 0; transition: max-height 0.2s ease-out; overflow: hidden;  width: 100px;  float: left;  background-color: yellow; display: inherit;}
      </style>
    </head>
    <body>
      <h1 id="displayingMonth"></h1>
      <button id="btn" type="button" name="btnPrev" onclick="prev();">&lt; Prev</button>
      <button id="btn" type="button" name="btnNext" onclick="javascript:next();"> Next &gt;</button>
      <table id="table" cellspacing="0" cellpadding="0"   border-collapse="collapse"></table>
      <script>
        var showDate = new Date();
        var months = ["Januari", "Februari", "March", "April", "May", "June","July", "Augusti", "September", "October", "November", "December"];
  var weeks = ["Sunday","Monday","Tuseday","Wednesday","Thursday","Friday","Saturday"];
        var theForm =
  '<form><fieldset><legend>Note For today</legend><input type="text" placeholder="enter something"/></fieldset><input type="submit" value="submit"/></form>'
        function drawTable(forDate) {
          var daysInMonth = new Date(forDate.getFullYear(),forDate.getMonth()+1,0).getDate();
          var cellsToDraw = daysInMonth;
          var newdate = forDate.getFullYear() +"-"+ ("0"+ (forDate.getMonth() + 1)).slice(-2);
          var table = document.getElementById("table");
          table.innerHTML = "";
          for (var r = 0; r < (daysInMonth / 7); r++) {
            var newRow = document.createElement("tr");
            table.appendChild(newRow);
            for (var c = 0; c < 31 && cellsToDraw > 0; c++) {
              var day1 = ("0" + (c + 1)).slice(-2);
              var textarea = document.createElement("button");
              textarea.setAttribute("placeholder", day1 );
              textarea.setAttribute("class", "row");
              newRow.appendChild(textarea);
              textarea.setAttribute("name", "day");
              textarea.setAttribute("day",  newdate + "-" + day1 );
              textarea.innerHTML = newdate + "-" + day1;
              var textarea1 = document.createElement("div");
              textarea1.setAttribute("class", "panel");
              newRow.appendChild(textarea1);
              textarea1.innerHTML = theForm;
              cellsToDraw--;
            }
          }
          var acc = document.getElementsByClassName("row");
          var i;
          for (i = 0; i < acc.length; i++) {
            acc[i].addEventListener("click", function() {
            var panel = this.nextElementSibling;
            var active = checkIfAnyVisible();
            if (active) {
              active.className = 'panel';
              active.style.maxHeight = null;
            }
            if (panel.style.maxHeight){
              panel.style.maxHeight = null;
              panel.className = 'panel';
            } else if (!checkIfAnyVisible()) {
            panel.style.maxHeight = panel.scrollHeight + "px";
            panel.style.width = "100%";
            panel.className = 'panel active';
            }
          });
        }
        function checkIfAnyVisible() {
          for (var i=0; i<acc.length; i++) {
            if (acc[i].nextElementSibling.className.includes('active')) {
              return acc[i].nextElementSibling;
            } else {
              continue;
            }
          }
          return false;
        }
      }
      window.onload = function() {
        document.getElementById("displayingMonth").innerHTML = months[showDate.getMonth()];
        drawTable(showDate);
      };
      function next() {
        if (showDate.getMonth() == 11) {
          showDate.setMonth( 0 );
          showDate.setFullYear( showDate.getFullYear()+1 );
        } else { showDate.setMonth( showDate.getMonth()+1 ); }
          document.getElementById("displayingMonth").innerHTML = months[showDate.getMonth()];
          drawTable( showDate );
        }
        function prev() {
          if (showDate.getMonth() === 0) {
            showDate.setMonth( 11 );
            showDate.setFullYear( showDate.getFullYear()-1 );
          } else { showDate.setMonth( showDate.getMonth()-1 );}
          document.getElementById("displayingMonth").innerHTML = months[showDate.getMonth()];
          drawTable( showDate );
        }
        function daysInMonth(month, year) {
          var days;
          switch (month) {
            case 1: // Feb, our problem child
            var leapYear = ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);
            days = leapYear ? 29 : 28;
            break;
            case 3:
            case 5:
            case 8:
            case 10:
            days = 30;
            break;
            default:
            days = 31;
          }
          return days;
        }
      </script>
    </body>
  </html>

编辑：当用户点击按钮时添加基本表单 - 正如您在评论中请求的那样。

EDIT2：单击另一个按钮时切换。

0
投票

我不确定我完全理解你想在页面上看到什么 - 我尝试将你的代码放在一个jsfiddle中，我没有看到根据月份创建的任何按钮，似乎缺少一些代码。

但是 - 如果您希望您的手风琴功能对于为每月的每一天创建的按钮有用，则它们需要具有与您当前使用手风琴功能的其他按钮相同的结构。他们需要类名“行”，因为这是手风琴工作的事件监听器如何附加的。因为你的函数调用this.nextElementSibling，所以每个按钮还需要一个兄弟元素。

更新：

谢谢你的小提琴！

因此，在您创建按钮并在其上设置属性的代码中，您是否还想创建“panel”元素，当您单击日期按钮时，该元素会向上或向下折叠？我认为将“textarea”重命名为“button”并创建一个单独的textarea元素会更有意义：

var button = document.createElement("button");
var textarea = document.createElement("div");
textarea.setAttribute("class", "panel");
newRow.appendChild(textarea);

然后，您可以向修改“面板”的按钮添加事件侦听器。这对我来说不是100％的工作，但是玩弄它：

button.addEventListener("click", function() {
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = "50px";
    }
});

在css中，我将height: 100px;添加到.panel {}区块。不过，你仍然需要弄清楚如何在日期之下获得黄色块。我希望这有帮助！

另一个更新：如果你把按钮和textarea放在一个父div中，它们会在另一个下面排成一行，虽然这确实意味着每个按钮在另一个下面排成一行：

var button = document.createElement("button");
var textarea = document.createElement("div");
var container = document.createElement("div");
button.setAttribute("placeholder", day1 );
button.setAttribute("class", "row");
textarea.setAttribute("class", "panel");
container.setAttribute("class", "container");

newRow.appendChild(container);
container.appendChild(button);
container.appendChild(textarea);

作为旁注，我想通过查看您的代码，您正在尝试创建一个表，其中表中的每一行代表一周。现在，所有按钮都在第一行结束。如果检查表，可以看到这个。要修复它，你需要在这里改变你的计数器，使其小于7而不是31：for (var c = 0; c < 7 && cellsToDraw > 0; c++) {

当你有它工作时，你可能想要考虑从表中切换并在div中重新创建它。通常如果我们使用表格，我们也使用<td>s，但我不确定这会在这里工作，因为你想把文字放在每个td下面。有一个带有按钮和div的桌子，感觉有点不对劲。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.