Jquery 通过AJAX传递多个选定的div值
有没有一种方法可以选择多个div并将值传递给ajax以便我可以查询它们 我在下面有3个颜色分区,每个都有一个绿色、白色或蓝色的类名。当前,单击其中一个会通过Ajax查询mysql数据库,该数据库返回具有选定颜色的任何图像 因此,如果我单击绿色,然后决定添加蓝色,页面将只重新加载最后选择的内容 HTMLJquery 通过AJAX传递多个选定的div值,jquery,ajax,Jquery,Ajax,有没有一种方法可以选择多个div并将值传递给ajax以便我可以查询它们 我在下面有3个颜色分区,每个都有一个绿色、白色或蓝色的类名。当前,单击其中一个会通过Ajax查询mysql数据库,该数据库返回具有选定颜色的任何图像 因此,如果我单击绿色,然后决定添加蓝色,页面将只重新加载最后选择的内容 HTML <div data-test="ColorSwatchItem green" style="margin-right: 8px; cursor: pointer; display: i
<div data-test="ColorSwatchItem green" style="margin-right: 8px; cursor: pointer; display: inline-block;">
<div class="ColorSwatch" style="position: relative;">
<div style="display: flex; align-items: center; justify-content: center; margin-left: auto; margin-right: auto; width: 28px; height: 28px;">
<svg width="28" height="28" x="0" y="0" viewBox="0 0 28 28" fill="#1a3a69" stroke-opacity="0.15">
<g stroke="rgb(64, 64, 64)" stroke-width="2" stroke-opacity="0.15" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<circle fill="#3f3f3f" cx="14" cy="14" r="13"></circle>
</g>
</svg>
</div>
<div style="position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px; display: flex; align-items: center; justify-content: center; pointer-events: none; fill: rgb(255, 255, 255);"></div>
</div>
</div>
<div class="ColorSwatchItem white" style="margin-right: 8px; cursor: pointer; display: inline-block;">
<div data-test="ColorSwatch" style="position: relative;">
<div style="display: flex; align-items: center; justify-content: center; margin-left: auto; margin-right: auto; width: 28px; height: 28px;">
<svg width="28" height="28" x="0" y="0" viewBox="0 0 28 28" fill="#1a3a69" stroke-opacity="0.15">
<g stroke="rgb(64, 64, 64)" stroke-width="2" stroke-opacity="0.15" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<circle fill="#ffffff" cx="14" cy="14" r="13"></circle>
</g>
</svg>
</div>
<div style="position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px; display: flex; align-items: center; justify-content: center; pointer-events: none; fill: rgb(255, 255, 255);"></div>
</div>
</div>
<div class="ColorSwatchItem blue" style="margin-right: 8px; cursor: pointer; display: inline-block;">
<div data-test="ColorSwatch" style="position: relative;">
<div style="display: flex; align-items: center; justify-content: center; margin-left: auto; margin-right: auto; width: 28px; height: 28px;">
<svg width="28" height="28" x="0" y="0" viewBox="0 0 28 28" fill="#1a3a69" stroke-opacity="0.15">
<g stroke="rgb(64, 64, 64)" stroke-width="2" stroke-opacity="0.15" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<circle fill="#4667fd" cx="14" cy="14" r="13"></circle>
</g>
</svg>
</div>
<div style="position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px; display: flex; align-items: center; justify-content: center; pointer-events: none; fill: rgb(255, 255, 255);"></div>
</div>
</div>
只需更改$(“.gridD”).html(结果)代码>到$(“.gridD”)。追加(结果)代码>
这将导致每次单击其中一个色样时,都会将AJAX回复添加到gridD容器中
$(".ColorSwatchItem").bind("click", function () {
var colorName = this.classList[1];
$.ajax({
url: 'filter.php',
type: 'GET',
data:({
// id: 0,
device:'desktop',
color: colorName
}),
success:function(results) {
$(".gridD").html(results);
}
});
})