Question

我有5个字段集，点击按钮后我想显示结果通过。如你所见，我只想点击按钮然后继续前进，最后列出所选内容。

      $(document).ready(function() {
            var results = "";
            $('button').click(function() {
            results += $(this).attr("value") + "<br>";
            });
            $("#demo").html(results);
       });

这是html代码

     <fieldset>
      <h2 class="fs-title">Pick a Type</h2>


    <input type="button" name="next" class="next action-button" value="VoIP"  /> <br>
    <input type="button" name="next" class="next action-button" value="Analog" />

    </br>
    <input type="text" name="custom" placeholder="Custom" style="width: 100px;"/>
    <br>

    <!--<input type="button" name="next" class="next action-button" value="Next" style="float:right" />
    <input type="button" name="previous" class="previous action-button" value="Previous" style="float:left" />
    -->
      </fieldset>
     <fieldset>

     <h2 class="fs-title">Pick a Sub-Type</h2>


    <input type="button" name="next" class="next action-button" value="Desk Phone"  /><br>
    <input type="button" name="next" class="next action-button" value="Polycom" /> <br>
    <input type="button" name="next" class="next action-button" value="Wireless Phone" style="white-space:normal"/> <br>
    <input type="text" name="customsub" placeholder="Custom " style="width: 100px;"/>
    <br>
    <br>
    <br>
    </br>
    <!--<input type="button" name="previous" class="previous action-button" value="Cancel" style="float:left" /> -->

</fieldset>
<fieldset>

    <h2 class="fs-title">Enter Model</h2>
    <input type="text" name="model" placeholder="Model"/>
    <input type="button" name="next" class="next action-button" value="Next" style="float:right" />
    <input type="button" name="previous" class="previous action-button" value="Previous" style="float:left" />

</fieldset>
<fieldset id="sample">
    <h2 class="fs-title">Complete</h2>
    <h3 class="fs-subtitle">Equipment Added Successfully!</h3>
    <p id="demo"> </p>
    <input type="button" name="previous" class="previous action-button" value="Add Another" />
    <input type="submit" name="submit" class="submit action-button" value="Done" />
</fieldset>

Answer 1

在该代码中，您将立即设置#demo元素的HTML 。

您要做的是在点击按钮时添加内容。通常使用<br>分隔事物并不理想;相反，请附加div或p元素或类似内容：

$(document).ready(function() {
    $('button').click(function() {
        $("#demo").append("<div>" + this.value + "</div>");
    });
});

请注意，这假定button元素具有value属性（就像您在示例中使用的那样）。如果没有，请使用$(this).text()或$(this).html()代替this.value。

完整示例：Live Copy

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <meta charset="utf-8">
  <title>Example</title>
</head>
<body>
  <button value="1">One</button>
  <button value="2">Two</button>
  <button value="3">Three</button>
  <button value="4">Four</button>
  <div id="demo"></div>
<script>
$(document).ready(function() {
    $('button').click(function() {
        $("#demo").append("<div>" + this.value + "</div>");
    });
});
</script>
</body>
</html>

打印按钮单击Jquery的结果

1 个答案: