Javascript 用于创建HTML卡的JS jQuery循环

我使用jQuery循环创建HTML部件

我想创建一些卡片，这些卡片是根据我有一些数据的数组创建的，这部分就完成了

但对于每张卡，我都有一个按钮，我为其创建了一个ID，并从功能：

on("click", function ()

我调用allert，此警报仅对第一个框有效

CSS:

HTML:

也许你会发现这个问题，因为我被卡住了，在半天的时间里试着找到一个解决方案：（

---

$（文档）.ready（函数（）{
var mokData=[
{类别：“材料”，id:'1'，名称：'机器制动'}，
{类别：“材料”，id:'2'，名称：'机器制动'}，
{类别：“工具”，id:'3'，名称：'机器制动'}，
{类别：“工具”，id:'4'，名称：'Brakedown of line'}，
{类别：“工具”，id:'5'，名称：'机器制动'}，
{类别：“工具”，id:'6'，名称：'Brakedown of line'}，
{类别：“工具”，id:'7'，名称：'机器制动'}，
{类别：“工具”，id:'8'，名称：'Brakedown of line'}
];
$.each（mokData，函数（i）{
var templateString=''+mokData[i]。类别+''+mokData[i]。名称+'
'+mokData[i]。id+'
Start'；
$（'#test12'）.append（templateString）；
})
$（“#test12”）。在（“单击”，函数（）{
警报（“测试”）；
});
})；

.cards{
保证金：-1rem；
}
.卡片{
宽度：220px；
浮动：左；
保证金：1rem；
边框：1px实心#D3；
填充：20px；
边界半径：5px；
背景色：白色；
}
@支持（显示：网格）{
.卡片{
保证金：0；
}
.卡片{
显示：网格；
网格模板列：重复（自动拟合，最小值（300px，1fr））；
网格间距：1rem；
}
}

---

$（文档）.ready（函数（）{
var mokData=[
{类别：“材料”，id:'1'，名称：'机器制动'}，
{类别：“材料”，id:'2'，名称：'机器制动'}，
{类别：“工具”，id:'3'，名称：'机器制动'}，
{类别：“工具”，id:'4'，名称：'Brakedown of line'}，
{类别：“工具”，id:'5'，名称：'机器制动'}，
{类别：“工具”，id:'6'，名称：'Brakedown of line'}，
{类别：“工具”，id:'7'，名称：'机器制动'}，
{类别：“工具”，id:'8'，名称：'Brakedown of line'}
];
$.each（mokData，函数（i）{
var templateString=''+mokData[i]。类别+''+mokData[i]。名称+'
'+mokData[i]。id+'
Start'；
$（'#test12'）.append（templateString）；
})
$（“#test12”）。在（“单击”，函数（）{
警报（“测试”）；
});
})；

.cards{
保证金：-1rem；
}
.卡片{
宽度：220px；
浮动：左；
保证金：1rem；
边框：1px实心#D3；
填充：20px；
边界半径：5px；
背景色：白色；
}
@支持（显示：网格）{
.卡片{
保证金：0；
}
.卡片{
显示：网格；
网格模板列：重复（自动拟合，最小值（300px，1fr））；
网格间距：1rem；
}
}

当您使用

jQuery（“elemid”）

它仅选择具有给定ID的第一个元素

但是，当您选择“按属性”（例如本例中的id）时，它将返回所有匹配的元素，如下所示：

jQuery（“[id=elemid]”

信用卡和更多信息：

当您使用

jQuery（“elemid”）

它仅选择具有给定ID的第一个元素

但是，当您选择“按属性”（例如本例中的id）时，它将返回所有匹配的元素，如下所示：

jQuery（“[id=elemid]”

---

信用卡和更多信息：

试试这个，我已经把你的按钮ID改成了课堂指令

$（文档）.ready（函数（）{
var mokData=[{
类别：“材料”，
id:'1'，
名称：“机器制动”
},
{
类别：“材料”，
id:'2'，
名称：“机器制动”
},
{
类别：“工具”，
id:'3'，
名称：“机器制动”
},
{
类别：“工具”，
id:'4'，
名称：“线路制动”
},
{
类别：“工具”，
id:'5'，
名称：“机器制动”
},
{
类别：“工具”，
id:'6'，
名称：“线路制动”
},
{
类别：“工具”，
id:'7'，
名称：“机器制动”
},
{
类别：“工具”，
id:'8'，
名称：“线路制动”
}
];
$.each（mokData，函数（i）{
var templateString=''+mokData[i]。类别+''+mokData[i]。名称+'
'+mokData[i]。id+'
Start'；
$（'#test12'）.append（templateString）；
})
$（“.alertButton”）。在（“单击”，函数（）{
警报（“测试”）；
});
})

.cards{
保证金：-1rem；
}
.卡片{
宽度：220px；
浮动：左；
保证金：1rem；
边框：1px实心#D3；
填充：20px；
边界半径：5px；
背景色：白色；
}
@支持（显示：网格）{
.卡片{
保证金：0；
}
.卡片{
显示：网格；
网格模板列：重复（自动拟合，最小值（300px，1fr））；
网格间距：1rem；
}
}

---

试试这个，我已经把你的按钮ID改成了课堂指令

$（文档）.ready（函数（）{
var mokData=[{
类别：“材料”，
id:'1'，
名称：“机器制动”
},
{
类别：“材料”，
id:'2'，
名称：“机器制动”
},
{
类别：“工具”，
id:'3'，
名称：“机器制动”
},
{
类别：“工具”，
id:'4'，
名称：“线路制动”
},
{
类别：“工具”，
id:'5'，
名称：“机器制动”
},
{
类别：“工具”，
id:'6'，
名称：“线路制动”
},
{
类别：“工具”，
id:'7'，
名称：“机器制动”
},
{
类别：“工具”，
id:'8'，
名称：“线路制动”
}
];
$.each（mokData，函数（i）{
var templateString=''+
.cards {
    margin: -1rem;
}

.card {
    width: 220px;
    float: left;
    margin: 1rem;
    border: 1px solid #d3d3d3;
    padding: 20px;
    border-radius: 5px;
    background-color: white;
}

@supports (display: grid) {
    .cards {
        margin: 0;
    }

    .cards {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-gap: 1rem;
    }
}

<main class="cards">
    <div id="test12"></div>
</main>

$.each(mokData, function (i) {
    var templateString = '<article class="card"><h2>' + mokData[i].category + '</h2><p>' + mokData[i].name + '</p><p>' + mokData[i].id + '</p><button id="tes">Start</button></article>';
    $('#test12').append(templateString);
})

$("#tes")on("click", function () {
    alert("test");
});

var mokData = [
{ category: "Material", id: '1', name: 'Brakedown of machine' },
{ category: "Material", id: '2', name: 'Brakedown of machine' },
{ category: "Tool", id: '3', name: 'Brakedown of machine' },
{ category: "Tool", id: '4', name: 'Brakedown of line' },
{ category: "Tool", id: '5', name: 'Brakedown of machine' },
{ category: "Tool", id: '6', name: 'Brakedown of line' },
{ category: "Tool", id: '7', name: 'Brakedown of machine' },
{ category: "Tool", id: '8', name: 'Brakedown of line' }
];