Question

我有生成两种类型按钮的Javascript代码。标题按钮然后是下面不同数量的内容按钮。我使用CSS3将按钮拆分为带有'-webkit-column-break'的列，但这在Internet Explorer或Safari中无法正常运行。

我有自定义Javascript的方法。我只是想知道它是否可能，以及我如何实现它。这是我的伪代码;

create 3 divs - 1, 2, and 3

count header array.
divide count by 3 to find number to place in each column.

create a counter.
for each header placed increase count by 1.
if count is equal to column maximum then use div 2.
if div2 count is equal to column maximum then use div 3.

我可以看到这种方法的一个问题是它没有考虑标题下面不同数量的列。我希望第1列和第2列的长度相等，或者如果可能的话，所有3都相等。

Answer 1

固定。这就是我做的方式

JS Fiddle here

 var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
mycars[3] = "Porsche";
mycars[4] = "Daewoo";
mycars[5] = "MG";

var arrayCount = mycars.length;

var columnLength = arrayCount / 3;

for (var i=0; i < mycars.length; i++)
{

if (i<columnLength)
{
      document.getElementById('carList').innerHTML += '<button class="countryButtons"> '+       mycars[i]+' </button><br />';
}
else if(i< columnLength*2)
{
 document.getElementById('carList2').innerHTML += '<button class="countryButtons"> '+    mycars[i]+' </button><br />';
 }
    else if(i< columnLength*3)
{
 document.getElementById('carList3').innerHTML += '<button class="countryButtons"> '+      mycars[i]+' </button><br />';
   }
  }

如何使用Javascript将动态生成的按钮拆分为列？

1 个答案: