Question

我使用javascript here

创建了多个div框（正在规划中）

for (i = 0; i < 168; i++) {
    var iDiv = document.createElement('div');
    iDiv.id = 'inc';
    document.getElementById('appointmentchart').appendChild(iDiv);
}

现在我需要使用JavaScript完成另外两件事。

点击内部任意div内部计划指定class="yellow"至纵向连续3 div（现在div水平排列）。

我是否需要垂直排列div来执行此操作？如果是这样，怎么样？
转到左侧的Practicien，选择Chirurgie - ＆gt; DUPONT Marc然后选择日期10-Mar-2014。您将在多个计划div图表中看到约会。其中一些从容器中出来。

如何将溢出部分移动到下一个div？

是否可以使用JavaScript实现上述目的？

Answer 1

首先给列提供不同的ID，如下所示：

for (i = 0; i < 168; i++) {
var iDiv = document.createElement('div');
iDiv.id = 'inc'+i; //different id
iDiv.addEventListener('click', clickFunction);// assign click handler
document.getElementById('appointmentchart').appendChild(iDiv);
}

假设每行总共有14列，你可以做

function clickFunction(){
 var num= parseInt(this.id.substring(3));
 for(var i=1;i<=3;i++){
  document.getElementById('inc'+num).className+= 'yellow'
  num+=14;
 }
}

更新： FIDDLE

Answer 2

你的问题1）的答案是：

连续元素根据它们出现在HTML代码中的顺序来判断，而不是基于它们最终在屏幕上的位置。如果你的计划网格保持相同的形状，行和列中的div总数相同，那么很容易得到你想要的那些。

var clickedDiv=//point this at the div you clicked on
//select the grid squares
var divs=document.getElementById('appointmentchart').getElementsByTagName('div');
//how many divs across your grid is
var cols=14; 

 for(var i=0;i<divs.length;i++){
  //find the clicked divs index
  if(clickedDiv=divs[i]){
    //make next three yellow
    for(var y=1;y<4;y++){
          var sqaure=cols*y;
          if(i+square<divs.length){
             divs[i+square].className='yellow';
          }
     }
    break;
 }
}

多个div附加并使用JavaScript进行选择

2 个答案: