javascript - 值始终在 console.log 中可见，但有时在输入字段中不可见

Question

我遇到了一个我不确定如何解决的问题。 当我将旋钮拖到图片中时，就会创建一个克隆。 在图像下方，然后显示带有按钮位置的表单。 问题是有时这个值不会在此输入字段中更新。

在第 85 行中，我设置了该值。 然后在第 89 和 90 行，我首先检查这个值是否存在。 通过: console.log(ui.position.left); console.log($("#dragItemPositionX[data-id="+ UUID + "]").val());

值总是出现在这里，但当我查看表单时，有时我在输入字段中看不到任何值。 (作为对此的测试用例，将按钮拖到图片上几次。有时您会在输入字段中看到没有值。

这怎么可能，我该如何解决？

function uuid() {
  var dt = new Date().getTime();
  var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = (dt + Math.random() * 16) % 16 | 0;
    dt = Math.floor(dt / 16);
    return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
  });
  return uuid;
}

$(document).ready(function() {
  // Create default knob
  $('#knob').jqxKnob({
    width: 34,
    height: 34,
    disabled: true,
    value: 0,
    min: 0,
    max: 100,
    startAngle: 120,
    endAngle: 420,
    snapToStep: true,
    rotation: 'clockwise',
    style: {
      stroke: '#000',
      strokeWidth: 1,
      fill: {
        color: '#fff'
      }
    },
    pointer: {
      type: 'line',
      thickness: 4,
      style: {
        fill: "#00a4e1",
        stroke: "#00a4e1"
      },
      size: '70%',
      offset: '0%'
    }
  });

  //Drag default knob in #droppable div

  $(".draggable").draggable({
    containment: "#droppable",
    appendTo: "#droppable",
    helper: "clone"
  });
});

  // Drag&Drop default knob

  $("#droppable").droppable({
    drop: function(event, ui) {

      //Generate UUID
      var UUID = uuid();

      // Change class in order to stop the cloning in droppable div.

      if (ui.draggable.hasClass("draggable")) {
        var $item = $(ui.helper).clone();
        $item.removeClass("draggable");
        $item.addClass("editable");
        $item.attr('data-id', UUID);
        $(this).append($item);
  $(".editable").draggable({
    containment: "#droppable",
    appendTo: "#droppable",
    drag: function(event, ui) {
     $("#dragItemPositionX[data-id=" + UUID + "]").val(ui.position.left);
        $("#dragItemPositionY[data-id=" + UUID + "]").val(ui.position.top);
    }
  });
        //Add a form  & fill some values

        $("#info").append("<form class='pure-form knob' name=" + UUID + " data-id=" + UUID + ">");
        $("form[data-id=" + UUID + "]").append($("#template").html());
        $("form[data-id=" + UUID + "]").find('input').each(function() {
          $('input').attr('data-id', UUID);
          $(this).attr('name', $(this).attr('name') + "[]");
        });

        $("#dragItemPositionX[data-id=" + UUID + "]").val(ui.position.left);
        $("#dragItemPositionY[data-id=" + UUID + "]").val(ui.position.top);


        console.log(ui.position.left);
        console.log($("#dragItemPositionX[data-id=" + UUID + "]").val());

        // Show form and active knob

        $("form.knob").hide();
        $("form[data-id=" + UUID + "]").show();
        $("body").find(".active_knob").removeClass("active_knob");
        $(".jqx-knob[data-id=" + UUID + "]").find("line").eq(-1).addClass("active_knob");
      }
    }
  })

JSfiddle

Answer 1

做了一些小的更新。您在 jQuery block 之外有一些项目。我怀疑您遇到了一些语法问题。

测试:https://jsfiddle.net/Twisty/acr1dvbf/5/

JavaScript

$(function() {
  function uuid() {
    var dt = new Date().getTime();
    var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
      var r = (dt + Math.random() * 16) % 16 | 0;
      dt = Math.floor(dt / 16);
      return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
    });
    return uuid;
  }

  // Create default knob
  $('#knob').jqxKnob({
    width: 34,
    height: 34,
    disabled: true,
    value: 0,
    min: 0,
    max: 100,
    startAngle: 120,
    endAngle: 420,
    snapToStep: true,
    rotation: 'clockwise',
    style: {
      stroke: '#000',
      strokeWidth: 1,
      fill: {
        color: '#fff'
      }
    },
    pointer: {
      type: 'line',
      thickness: 4,
      style: {
        fill: "#00a4e1",
        stroke: "#00a4e1"
      },
      size: '70%',
      offset: '0%'
    }
  });

  //Drag default knob in #droppable div

  $(".draggable").draggable({
    containment: "#droppable",
    appendTo: "#droppable",
    helper: "clone"
  });

  // Drag&Drop default knob

  $("#droppable").droppable({
    drop: function(event, ui) {

      //Generate UUID
      var UUID = uuid();

      // Change class in order to stop the cloning in droppable div.

      if (ui.draggable.hasClass("draggable")) {
        var $item = $(ui.helper).clone();
        $item.toggleClass("draggable editable");
        $item.attr('data-id', UUID);
        $(this).append($item);
        $(".editable").draggable({
          containment: "#droppable",
          appendTo: "#droppable",
          drag: function(event, ui) {
            $("#dragItemPositionX[data-id=" + UUID + "]").val(ui.position.left);
            $("#dragItemPositionY[data-id=" + UUID + "]").val(ui.position.top);
          }
        });
        //Add a form  & fill some values

        $("#info").append("<form class='pure-form knob' name=" + UUID + " data-id=" + UUID + ">");
        $("form[data-id=" + UUID + "]").append($("#template").html());
        $("form[data-id=" + UUID + "]").find('input').each(function(i, el) {
          $('input').attr('data-id', UUID);
          $(el).attr('name', $(this).attr('name') + "[]");
        });

        $("#dragItemPositionX[data-id=" + UUID + "]").val(ui.position.left);
        $("#dragItemPositionY[data-id=" + UUID + "]").val(ui.position.top);


        console.log(ui.position.left);
        console.log($("#dragItemPositionX[data-id=" + UUID + "]").val());

        // Show form and active knob

        $("form.knob").hide();
        $("form[data-id=" + UUID + "]").show();
        $(".active_knob").removeClass("active_knob");
        $(".jqx-knob[data-id=" + UUID + "]").find("line").eq(-1).addClass("active_knob");
      }
    }
  });
});

当我四处移动克隆时，我总是会得到值更新。

更新

如果添加更多旋钮，则需要有条件地添加旋钮，或者如果它是现有旋钮，则显示正确的形式并显示正确的位置。

示例:https://jsfiddle.net/Twisty/acr1dvbf/95/

JavaScript

$(function() {
  function getId() {
    var dt = new Date().getTime();
    var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
      var r = (dt + Math.random() * 16) % 16 | 0;
      dt = Math.floor(dt / 16);
      return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
    });
    return uuid;
  }

  function makeKnobDrag(item) {
    return $(item).draggable({
      containment: "#droppable",
      drag: function(event, ui) {
        $("#knob-form-" + $(item).data("form") + " .drag-x").val(ui.position.left);
        $("#knob-form-" + $(item).data("form") + " .drag-y").val(ui.position.top);
      }
    });
  }

  function getActiveKnobPosition() {
    return $(".active_knob").closest(".jqx-knob").position();
  }

  function makeForm(target, uuid) {
    var c = $(".active_knob").closest(".jqx-knob").data("form");
    var form = $("<form>", {
      class: "pure-form knob",
      name: uuid,
      "data-id": uuid,
      id: "knob-form-" + c
    }).appendTo(target);
    form.append($("#template form").children().clone());
    form.find('input').each(function(i, el) {
      $(el).attr({
        name: $(el).attr("name") + "[]",
        "data-id": uuid,
        id: $(el).attr("id").substring(0, $(el).attr("id").indexOf("-")) + c
      });
    });
    $("form.knob").hide();
    var kPos = getActiveKnobPosition();
    $(".drag-x", form).val(kPos.left);
    $(".drag-y", form).val(kPos.top);
    form.show();
  }


  // Create default knob
  $('#knob').jqxKnob({
    width: 34,
    height: 34,
    disabled: true,
    value: 0,
    min: 0,
    max: 100,
    startAngle: 120,
    endAngle: 420,
    snapToStep: true,
    rotation: 'clockwise',
    style: {
      stroke: '#000',
      strokeWidth: 1,
      fill: {
        color: '#fff'
      }
    },
    pointer: {
      type: 'line',
      thickness: 4,
      style: {
        fill: "#00a4e1",
        stroke: "#00a4e1"
      },
      size: '70%',
      offset: '0%'
    }
  });

  //Drag default knob in #droppable div

  $(".draggable").draggable({
    containment: "#droppable",
    helper: "clone",
    start: function(e, ui) {
      ui.helper.addClass("new-item");
    }
  });

  // Drag&Drop default knob

  $("#droppable").droppable({
    drop: function(event, ui) {
      var $self = $(this);
      var UUID;
      var $item = $(ui.helper).clone();
      $(".active_knob").removeClass("active_knob");
      if ($item.hasClass("new-item")) {
        UUID = getId();
        $item.removeClass("new-item").toggleClass("draggable editable ui-draggable ui-draggable-dragging");
        $item.attr({
          "data-id": UUID,
          "data-form": "knob-form-" + ($("form.knob").length + 1)
        });
        $self.append($item);
        $item.find("line").eq(-1).addClass("active_knob");
        makeKnobDrag($item, UUID);
        makeForm("#info", UUID);
      } else {
        UUID = $item.data("id");
        c = $item.data("form");
        $("form.knob").hide();
        $item.find("line").eq(-1).addClass("active_knob");
        $("#knob-form-" + c).show();
      }
    }
  });
});

如您所见，如果它是一个新项目，它将被添加到 droppable 中。如果不是新项目，它将显示正确的形式并更新位置。