Question

有没有办法选择多个div并将值传递给ajax，以便我可以查询它们？

我下面有3个颜色div，每个颜色div都有一个绿色，白色或蓝色的类名。当前单击其中一个将通过Ajax并查询mysql数据库，该数据库返回具有所选颜色的任何图像。

因此，如果我点击绿色然后决定我要添加蓝色，那么页面将重新加载最后一次选择。

HTML

   <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>

jquery

$(".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);
      }
  });
})

Answer 1

只需将$(".gridD").html(results);更改为$(".gridD").append(results);即可。

这将导致其中一个颜色样本的每次单击将AJAX回复添加到gridD容器。

通过AJAX传递多个选定的div值

1 个答案: