代码之家 › 专栏 › 技术社区 › StackUnderFlow

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

ajax jquery

StackUnderFlow · 技术社区 · 6 年前

有没有办法选择多个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);
      }
  });
})

1 回复 | 直到 6 年前

Andrew 6 年前

只是换衣服 $(".gridD").html(results); 到 $(".gridD").append(results); 。

这将导致每次单击其中一个颜色样本时都会将ajax回复添加到grid容器中。