Question

我正在使用jsGrid来显示数据库中的数据。我想避免大量的复制粘贴代码，并希望为具有特定ID的每个<div>创建一个网格，并在可能的情况下传递其他一些相应的值。

我想最好通过提供此代码示例来说明我想要完成的任务：

function gridfunction(){

   $("#jsgrididvalue").jsGrid({
       var one = new Array ('red', 'green', 'brown');
       var two = new Array ('car', 'bus');
       var variable = "good";
       //the grid jscode is omitted here
   })

   $("#jsgrididvaluetwo").jsGrid({
       var one = new Array ('red', 'green', 'brown');
       var two = new Array ('orange', 'yellow', 'blue');
       var variable = "bad";
       //the grid jscode is omitted again
   })

}

现在，我不知道是否可能，但我希望增加像

这样的东西

<div id="jsgrididvalue" arrayone="red, green, brown" arraytwo="car, bus" something="good"></div>
<div id="jsgrididvaluetwo" arrayone="orange, yellow, blue" arraytwo="train, plane" something="bad"></div>

而不仅仅是

<div id="jsgrididvalue"></div>
<div id="jsgrididvaluetwo"></div>

会帮助我达到我想要的目标。我正在尝试使用getElementbyID和其他一些东西，但无法正常工作。如果有人能指出我正确的方向或者告诉我这样的事情是否可能，我将非常感激。毋庸置疑，我正在学习javascript。

Answer 1

HTML：

<div id="jsgrididvalue" arrayone="red,green,brown" arraytwo="car,bus" something="good"></div>
<div id="jsgrididvaluetwo" arrayone="orange,yellow,blue" arraytwo="train,plane" something="bad"></div>

您需要替换上面arrayone属性值的空格

的javascript：

function gridfunction(){

   $("#jsgrididvalue").jsGrid({
       var one = $(this).attr("arrayone").split(",");
       var two = $(this).attr("arrayone").split(",");
       var variable = $(this).attr("something");
       //the grid jscode is omitted here
   })

   $("#jsgrididvaluetwo").jsGrid({
       var one = $(this).attr("arrayone").split(",");
       var two = $(this).attr("arrayone").split(",");
       var variable = $(this).attr("something");
       //the grid jscode is omitted again
   })

}

Answer 2

我可以通过这个改进NOBrien的答案：

<div class="jsGridItem" id="jsgrididvalue" data-arrayone="red,green,brown" data-arraytwo="car,bus" data-something="good"></div>
<div class="jsGridItem" id="jsgrididvaluetwo" data-arrayone="orange,yellow,blue" data-arraytwo="train,plane" data-something="bad"></div>`

然后你可以调用包含该类的每个元素：

function gridfunction(){
    $(".jsGridItem").each(function(){
       var one = $(this).data('arrayone').split(',');
       var two = $(this).data('arraytwo').split(',');
       var variable = $(this).data('something');

       $(this).jsGrid({
           fields: []//use your data 
       });
       //the grid jscode is omitted here
   })
}

Answer 3

将自定义属性作为数据元素添加到div中（删除数组列表中的空格）

<div class="jsGridItem" id="jsgrididvalue" data-arrayone="red,green,brown" data-arraytwo="car,bus" data-something="good"></div>
<div class="jsGridItem" id="jsgrididvaluetwo" data-arrayone="orange,yellow,blue" data-arraytwo="train,plane" data-something="bad"></div>`

和两者的共同类。然后你可以同时抓住两个：

function gridfunction(){
    $(".jsGridItem").jsGrid({
       var one = $(this).data('arrayone').split(',');
       var two = $(this).data('arraytwo').split(',');
       var variable = $(this).data('something');
       //the grid jscode is omitted here
   })
}

从HTML获取数据到Javascript（jQuery）

3 个答案: