Question

我正在学习jQuery，所以我一直在踩着我的旧代码试图改变一切，到目前为止，它很容易实现，直到我遇到这个。

我有一些javascript代码

myText.innerHTML += "<li>"+input_text+" "+input_date+" "+input_time+"</li>";}

使用这段html代码

<button onClick='buttonClicked'>Submit!</button>

我认为我会转换为

<input type ="button" id ='buttonClicked' value="Submit!"/>

我似乎还没有让jQuery适合这一点而且它有点令人沮丧。

显然，除了我给出的代码之外还有更多的内容，我只是想让每个人都集中注意力，如果你真的需要更多的问题，我已经转换了剩下的代码了。但js到jQuery。我的朋友说我应该使用＆＃39;追加＆＃39;但是，到目前为止，我还没能弄明白。

你可以转换它并链接到一些文档，说明它为什么有效吗？让我知道，让我更快地理解这些东西会非常有帮助，谢谢！

编辑：是

function buttonClicked() {
var myText = document.getElementById('myText');
var input_text = document.getElementById('input_text').value  ; 
var input_date = document.getElementById('input_date').value  ;        
var  input_time = document.getElementById('input_time').value  ; 
myText.innerHTML += "<li>"+input_text+" "+input_date+" "+input_time+"</li>";}

到目前为止，jQuery是：

$(document).ready(function() {
var input_text = $('#input_text').val();   
var input_date = $('#input_date').val();
var input_time = $('#input_time').val();
$('#buttonClicked').click(function(){
  //$('#myText').append(function(){ $("<li> "+input_text+" "+input_date+" "+input_time+" </li>") 
//$('myText').html();

});


});

我已经尝试了很多，但我不知道从哪里开始。

Answer 1

假设您的HTML上有类似的内容：

<input type="button" id="buttonClicked" value="Submit!">
<div id="myText></div>

您可以像这样使用jQuery：

$('#buttonClicked').click(function () {
    $('#myText').append("<li>"+input_text+" "+input_date+" "+input_time+"</li>");
});

Answer 2

第一步是使用JQuery为您的按钮添加一个单击处理程序。 Docs.

$("#buttonClicked").click(function() {
  //handle click
});

您将要在单击处理程序调用的该函数中使用append方法。可以找到here的文档。

Answer 3

为您的按钮添加点击处理程序，并使用$.append插入您想要的内容。

您可以在此处查看文档：{{3}}

$(function(){
   $('#buttonClicked').click(function(){
      var input_text = $('#input_text').val();
      var input_date = $('#input_date').val();
      var input_time = $('#input_time').val();
      $('#myText').append("<li>"+input_text+" "+input_date+" "+input_time+"</li>");
   });

}）;

Answer 4

其他答案有效，但我建议对点击事件使用“on”：

$("#buttonClicked").on("click", function(e){
    e.preventDefault(); //this, along with return false, will prevent default behavior from button clicks - probably only useful in web applications, but a good convention to start using
    $('#myText').append("<li>"+input_text+" "+input_date+" "+input_time+"</li>"); // Note that this will continue to append additional li elements with each button click.  If that is not desired, you can call $("#myText").empty(); before adding the li element
    return false;
});

将innerhtml javascript转换为jquery

4 个答案: