Question

当我点击链接时，我会弹出正确数量的弹出框。在那里我确定他们的数量，点击生成，并根据我选择它们的数量，将它们添加到相应的div。在生成的框中有p，它也有一个onclick。它激活一个匿名函数并添加输入和下一个按钮。在此插入中，我添加了一个指向图像的链接。例如，通过添加5个输入，四个正在工作，然后第一个输入src未知。这有什么问题？

Observable<JSONObject> jsonObjectObservable = Observable.just(data);

inputval = 0;
$("#incrementer").on("click", function() {
  inputval = $(".param1").val();
  if (inputval < 5) {
    inputval++;
    $(".param1").val(inputval);
  } else {
    alert("Error! Max five elements");
  }
});

$("#decrementer").on("click", function() {
  inputval = $(".param1").val();
  inputval--;
  if (inputval <= 0) {
    inputval = 0;
  }
  $(".param1").val(inputval);
});

function popup(enabled) {
  switch (enabled) {
    case "enable":
      $("#popup").css("display", "block");
      break;

    case "disabled":
      $("#popup").fadeOut("slow");
      break;
  }
}

function param(type) {
  $("#generate").off();
  field = $(".param1").val();

  switch (type) {
    case "optional":
      if (field == 1) {
        for (counter = 0; counter < field; counter++) {
          $("#example").append('<div class="grid-1-5"><p class="test">Add optional img</p></div>');
        }
      } else if (field == 2) {
        for (counter = 0; counter < field; counter++) {
          $("#example").append('<div class="grid-2-5"><p class="test">Add optional img</p></div>');
        }
      } else if (field == 3) {
        for (counter = 0; counter < field; counter++) {
          $("#example").append('<div class="grid-3-5"><p class="test">Add optional img</p></div>');
        }
      } else if (field == 4) {
        for (counter = 0; counter < field; counter++) {
          $("#example").append('<div class="grid-4-5"><p class="test">Add optional img</p></div>');
        }
      } else if (field == 5) {
        for (counter = 0; counter < field; counter++) {
          $("#example").append('<div class="grid-5-5"><p class="test">Add optional img</p></div>');
        }
      } else {
        alert("Error!");
      }
      
      $(".test").on("click", function() {
        $(this).parent().append('<input type="text" name="param2" id="param2" placeholder="Path to img" /><button type="button" class="submit-btn">Add</button>');
        $(this).fadeOut("slow");
        pathtoimg = $("#param2").val();

        $(".submit-btn").on("click", function() {
          $(this).parent().append('<img style="width: 100%;" src="' + pathtoimg + '" />');
          $(this).fadeOut("slow");
          $(this).prev().fadeOut("slow");
        });
      });
      break;
  }
}

$("#optional").on("click", function() {
  popup("enable");

  $("#generate").on("click", function() {
    param("optional");
  });
});

$("#close").on("click", function() {
  popup("disabled");
});

Answer 1

您尝试在input点击之前获得submit值。

当用户点击input时，您需要获得submit值，如下所示。

 $(".submit-btn").on("click", function() {
              pathtoimg = $(this).prev().val();

点击pathtoimg = $("#param2").val();点击.test。

inputval = 0;
$("#incrementer").on("click", function() {
  inputval = $(".param1").val();
  if (inputval < 5) {
    inputval++;
    $(".param1").val(inputval);
  } else {
    alert("Error! Max five elements");
  }
});

$("#decrementer").on("click", function() {
  inputval = $(".param1").val();
  inputval--;
  if (inputval <= 0) {
    inputval = 0;
  }
  $(".param1").val(inputval);
});

function popup(enabled) {
  switch (enabled) {
    case "enable":
      $("#popup").css("display", "block");
      break;

    case "disabled":
      $("#popup").fadeOut("slow");
      break;
  }
}

function param(type) {
  $("#generate").off();
  field = $(".param1").val();

  switch (type) {
    case "optional":
      if (field == 1) {
        for (counter = 0; counter < field; counter++) {
          $("#example").append('<div class="grid-1-5"><p class="test">Add optional img</p></div>');
        }
      } else if (field == 2) {
        for (counter = 0; counter < field; counter++) {
          $("#example").append('<div class="grid-2-5"><p class="test">Add optional img</p></div>');
        }
      } else if (field == 3) {
        for (counter = 0; counter < field; counter++) {
          $("#example").append('<div class="grid-3-5"><p class="test">Add optional img</p></div>');
        }
      } else if (field == 4) {
        for (counter = 0; counter < field; counter++) {
          $("#example").append('<div class="grid-4-5"><p class="test">Add optional img</p></div>');
        }
      } else if (field == 5) {
        for (counter = 0; counter < field; counter++) {
          $("#example").append('<div class="grid-5-5"><p class="test">Add optional img</p></div>');
        }
      } else {
        alert("Error!");
      }

      $(".test").on("click", function() {
        $(this).parent().append('<input type="text" name="param2" class="param2" placeholder="Path to img" /><button type="button" class="submit-btn">Add</button>');
        $(this).fadeOut("slow");

        $(".submit-btn").on("click", function() {
          pathtoimg = $(this).prev().val();
          $(this).parent().append('<img style="width: 100%;" src="' + pathtoimg + '" />');
          $(this).fadeOut("slow");
          $(this).prev().fadeOut("slow");
        });
      });
      break;
  }
}

$("#optional").on("click", function() {
  popup("enable");

  $("#generate").on("click", function() {
    param("optional");
  });
});

$("#close").on("click", function() {
  popup("disabled");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="optional">Additional box</a>
<div id="popup" style="position: absolute; top: 50%; transform: translateY(-50%); width: 500px; left: 50%; margin-left: -250px; background: #000; color: #fff; display: none;">
  <p>Params <button type="button" id="close">x</button></p>
  <div style="position: relative; overflow: hidden; width: 173px;">
    <button type="button" id="incrementer" style="position: absolute; right: 0; top: 0; height: 21px; width: 21px; border: 0;">+</button>
    <button type="button" id="decrementer" style="position: absolute; right: 21px; top: 0; height: 21px; width: 21px; border: 0;">-</button>
    <input class="param1" type="text" placeholder="0" value="" />
  </div>
  <button type="button" id="generate">Generate</button>
  <div id="example"></div>

第一个.append中的变量未知

1 个答案: