Question

我正在尝试根据请求动态显示表单。

HTML

<label for="Type" class="required">Type</label>
<br>
<input id="f01" name="fieldid[]" type="hidden" value="23">
<input class="23" id="01" required="1" name="type" type="checkbox" value="g_magic"><span>   G magic</span>
<div>
  <div id="div0g_magic"></div>
</div>
<input id="f02" name="fieldid[]" type="hidden" value="23">
<input class="23" id="02" required="1" name="type" type="checkbox" value="four_five"><span>   Four five</span>
<div>
  <div id="div0four_five"></div>
</div>
</div>

JAVASCRIPT

$("#01").on("change", function () {
  var valueid = $("#01").val();
  var fieldid = $("#f01").val();
  if ($(this).is(":checked")) {
    send(valueid, fieldid);
  } else {
    $("#div0" + valueid).empty();
  }
});

function send(valueid, fieldid) {
  $.ajax({
    url: '/echo/js/?js=hello%20world!',
    success: function (response) {

      $("#div0" + valueid).html(response.responseText);

    },
    error: function (response) {
      $("#div0" + valueid).html(response);
    }
  });
}

$("#02").on("change", function () {
  var valueid = $("#02").val();
  var fieldid = $("#f02").val();
  if ($(this).is(":checked")) {
    send(valueid, fieldid);
  } else {
    $("#div0" + valueid).empty();
  }
});

function send(valueid, fieldid) {
  $.ajax({
    url: '/echo/js/?js=hello%20JS!',
    success: function (response) {

      $("#div0" + valueid).html(response.responseText);

    },
    error: function (response) {
      $("#div0" + valueid).html(response);
    }
  });
}

CSS

.required:after {
  color: #e32 !important;
  content: ' * ' !important;
  display: inline !important;
}

Answer 1

方法send（）发生冲突。在更改函数中为send（）指定不同的名称。

Answer 2

我无法看到您的代码，因此我无法完全确定，但听起来您希望根据请求动态显示/隐藏一个或多个表单。使用jQuery很容易实现。您将使用此代码：

$("#element-id").hide();

或

$("#element-id").show();

其中#lement-id是要显示/隐藏的元素的id。如果您想要一次性避免ID或隐藏多个元素，您可以为元素提供类似＆＃39; element-class＆＃39;的类，然后您将使用：

$(".element-class").hide();

如果这不是您想要完成的任务，请更新/评论，希望有人可以提供更多帮助！

Answer 3

从html元素中删除html内容

document.getElementById("element_id").innerHTML=""

将html内容添加到html元素

document.getElementById("element_id").innerHTML="<p>This is a new content</p>"

动态添加/删除html元素

3 个答案: