Question

我有一个带有手风琴的模态窗口，用户可以在其中更改有关该图像的某些值。我为页面上的所有图像共享一个模态和手风琴。

当我将一个图像的值更改为例如true时，也会在手风琴中显示所有其他图像的真值。

我希望看到的只是为实际更改的图像显示的真实值。

这是迄今为止的JavaScript：

  $(".glyphicon-tags").on('click', function(){
    var iid = $(this).data('iid');

    $(".onoffswitch").off("click").on("click", function(){
      var tid = $(this).data('tid');
        alert(iid + ' => ' + tid);
    });
  });

修改这是为页面上的每个图像生成的HTML。

<span class="footer-right">
  <span class="glyphicon glyphicon-tags" data-toggle="modal" data-iid="MYIMAGEIDHERE" data-target="#modal"></span>
</span>

这是从我的后端代码生成的开关：

  <input type="checkbox" name="onoffswitch" class="onoffswitch onoffswitch-checkbox" id="HEADERID" data-tid="MYTAGID">
  <label class="onoffswitch onoffswitch-label" for="HEADERID">
    <span class="onoffswitch-inner"></span>
    <span class="onoffswitch-switch"></span>
  </label>

修改

这就是现在的JavaScript。请注意，这包括tagID和imageID。当用户单击复选框时，imageID和tagID将发送到服务器。这将为该图像设置标记。

回顾一下，我正在使用来自我的后端代码的动态生成输入的一个副本，该代码为页面上的所有图像提供服务。我看到的问题是在pageload（新会话）上，它使我无法重新设置用户之前标记的内容，最后一个问题是当用户标记例如图像＃1时，图像＃1的值还显示（选中）所有未来图像标记（在该会话期间）。

  $(".glyphicon-tags").on('click', function(e){
    var iid = $(this).data('iid'); // This is the imageID
    e.preventDefault();

    $(".onoffswitch").off("click").on("click", function(){
      var tid = $(this).data('tid'); // This is the tagID

      if( typeof $(this).prop('checked') !== 'undefined'){
        var request = $.ajax({
          url : "tag.php",
          type: "POST",
          data:{iid: iid, tid: tid}
        });
      }
    });
  });

Answer 1

一个ajax调用，只要用户使模式显示，就会将图像的数据恢复到模态中，这是一种相当标准的方法。保存模态时，您已将数据保存到服务器，因此，如果稍后再次选择相同的图像，则使用此数据重新填充模式是有意义的。

这样，模态随后会填充服务器中与该图像相关的最新值。然后用户可以再次通过ajax将这些值保存回服务器，并关闭模态。就像您在桌面上或在独立的Web表单中打开表单一样 - 主要区别在于使用ajax，而且不需要整页刷新。

重置与新元素相对应的输入值

1 个答案: