Question

我正在处理添加到网站的比较功能，所以在当前页面上有一些结果，其中有一个名为add to compare附加的复选框。

因此，当用户单击“添加到比较”复选框时，所选结果将附加到一个compare box div，此过程将继续。

我的问题是，当用户想要从compare div box取消选中或删除所选结果时，他应该能够将其删除。

这是我迄今为止所做的代码的 HTML

    <div id='compare_box'>
    <form action="compare_results.php" method="POST">
      <div id='result'>

      </div>
      <button id="compare_submit" type="submit" class="btn btn-primary btn-sm">compare</button>
      </form>
        </div>

     <div class="col-md-3 photo-grid " style="float:left"> 

        <div class="well well-sm">

        <h4><small><?php echo $title; ?></small></h4>

     <br>
     <div class="features">
          <div id="compare_feature">
     <input type ='checkbox' name="compare" class="compare" value="<?php echo $id;?>">add to compare
          </div>

    <button  class='btn btn-sm btn-info favourite_feature'  value="<?php echo $id;?>">add to favourite</button>

     </div>

    </div>
</div>

css

 #compare_box
{
  display: none;
}

ajax电话

        $(".compare").change(function() {
if(this.checked) {  
  $('#compare_box').show();
var check = $(this).val();      
    $.ajax({
        type: 'POST',
        url: 'compare.php',
        dataType : "JSON",
        data:{value : check},
        success: function(data)
        {
            console.log(data);   
        console.log(data.id);
       var output = "<div class='col-md-3 photo-grid' style='float:left'>";
       output += "<div id='course_title' class='well well-sm'>";
       output += "<h4>"+data.title+"</h4>";
       output+="<textarea class='hidden' id='hidden_title' name='course_title[]' value=>"+data.title+"</textarea>";
        output+="</div>";
        output+="<input type='hidden' id='hidden_id' name='course_id[]' value="+data.id+">";
       output+="</div>";
            $('#result').append(output); 
        }
    });
  }

 });

PS：I'm trying to implement something like this

Answer 1

什么是'#compare_box'？它是复选框消失时出现的元素（在你的选择中的例子中）？

然后在'#result'上绑定一个动作 - 精确的东西可以将你的元素链接到复选框，就像一个id（当你在ajax响应中准备你的html时）。

$('#result').on('click', function() {
   $($(this).data('id')).prop('checked', false); // uncheck it
   $(this).remove(); 
});

取消选中复选框时执行相同操作（找到包含复选框的data-id的元素并将其删除）

编辑：它不是完美的代码使其工作，您可能会根据您绑定的位置进行调整或放置数据ID

在复选框上创建比较框单击无效

1 个答案: