Question

我正在尝试使用jQuery来获取用户输入并将其插入到具有userInput类的多个div中。我能够使用vanilla JavaScript，但我不想继续使用ID来重复我的代码。

到目前为止，我可以接受用户输入并将其显示为警报，以便我知道它正在被读取。那么我可以从输入字段中获取此输入并将其放入类中吗？

<form>
    <input class="userInput" type="text" maxlength="10" onclick="insertInput()" placeholder="Username" required><br>
    <a href="#chapter-1">
        <div id="submitbutton" class="button">Continue</div>
    </a>
</form>


$(function() {
    $("#submitbutton").click(function() {
        alert($(".userInput").val());
    });
});

Answer 1

$(function() {
  $("#submitbutton").click(function() {
    $('.userInput').text($(".userInput").val());
  });
});

检查此fiddle

Answer 2

定义具有相同类别的divs的数量。然后将input值设置为类text。

$(function() {
                $("#submitbutton").click(function() {
                        var value = $(".userInput").val();
                        $(".insert").text(value);
                });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input class="userInput" type="text" maxlength="10" placeholder="Username"  required><br>
<a href="#chapter-1">
<div id="submitbutton" class="button"> Continue</div>
</a>
</form>
<div class="insert">

</div>
<div class="insert">

</div>
<div class="insert">

</div>

Answer 3

像这样：

var elements = document.querySelectorAll('p.userInput');

var doAction = function(event) {
  var inputValue = document.querySelector('input.userInput').value;
  
  for(var i=0; i < elements.length; i++) {
    elements[i].innerHTML = inputValue;
  }
}

var element = document.querySelector('#submitbutton');
element.addEventListener('click', doAction);

<form>
  <input class="userInput" type="text" maxlength="10"  placeholder="Username"  required><br>
  <a href="#chapter-1">
    <div id="submitbutton" class="button"> Continue</div>
  </a>
</form>

<p class="userInput"> </p>
<p class="userInput"> </p>
<p class="userInput"> </p>

没理由使用jQuery。

jQuery - 获取用户输入并将其插入到具有类的多个div中

3 个答案: