Question

我是编程和学习JavaScript的新手。我知道jQuery是JavaScript的库，但是语法是如此不同，我只需要一些帮助来阅读代码在做什么，以便可以使用JavaScript重新创建它。

我正在处理一个youtube教程中的项目，该项目将项目添加到WebSQL数据库中。jQuery Mobile我正在本教程中的某个时刻，我们正在更新输入的项目。该代码能够使用我们输入的信息填充更新表单。该代码可以完美运行，但是它在jQuery中，我想尽可能将其更改为JavaScript。您能通过解释代码的实际作用以及如何将其转换为JavaScript来帮助我吗？谢谢你。

更新表单的HTML代码

       <div data-role="header">
           <h1>Update Product</h1>
       </div>
       <div data-role="main" class="ui-content">
           <form>
               <div class="ui-field-contain">
                   <label for="newName" class="ui-hidden-accessible">Name</label>
                   <input type="text" id="newName" data-clear-btn="true" placeholder="New Name"/><br/>
                   <label for="newQuantity" class="ui-hidden-accessible">Quantity</label>
                   <input type="number" name="number" pattern="[0-9}" id="newQuantity" value="" data-clear-btn="true" placeholder="New Quantity"/><br/>
                   <button class="ui-btn ui-icon-plus ui-btn-icon-left"
                           id="btnupdate" onclick="updateProduct()">Update</button>
               </div>
           </form>

       </div>
````    </div>

JavaScript Code of populating the form and then updating the changes.

````var currentProduct = {
  id:-1,
  name: "",
  quantity:-1,
````}

````$(document).on('pagebeforeshow', '#updatedialog', function() {
 $('#newName').val(currentProduct.name);
 $('#newQuantity').val(currentProduct.quantity);
});

function updateProduct() {
 var newName = $('#newName').val();
 var newQuantity = $('#newQuantity').val();
 productHandler.updateProduct(currentProduct.id, newName, newQuantity);
}

    databaseHandler.db.transaction(
        function(tx){
            tx.executeSql(
            "Update product set name=?, quantity=? where id=?",
             [newName, newQuantity, _id],
              function(tx, results){},
               function(tx, error){//todo: display this message to user
                    console.log("Error updating product" + error.message);
                 }
               );
        }
    );
}

我想用产品信息填充更新表单，更改表单上的任何信息，然后使用JavaScript而不是jQuery更新信息。

Answer 1

每当我需要将JQuery代码更改为Javascript时，都会使用以下网页：http://youmightnotneedjquery.com/和Jquery to Javascript。您应该在那里具有将Jquery部分更改为javascript所需的所有信息。

最明显的是用document.querySelectorAll替换“ $”。

示例：

$('#newName').val(currentProduct.name);

替换为：

document.getElementById('newName').value = currentProduct.name;

希望有帮助！

Answer 2

这是jQuery的一部分：

$(document).on('pagebeforeshow', '#updatedialog', function() {
    $('#newName').val(currentProduct.name);
    $('#newQuantity').val(currentProduct.quantity);
});

function updateProduct() {
    var newName = $('#newName').val();
    var newQuantity = $('#newQuantity').val();
    productHandler.updateProduct(currentProduct.id, newName, newQuantity);
}

这是将它们转换为纯JavaScript的方法：

document.getElementById("updatedialog").addEventListener("pagebeforeshow", function() {
    document.getElementById("newName").value = currentProduct.name;
    document.getElementById("newQuantity").value = currentProduct.name;
});

function updateProduct() {
    var newName = document.getElementById("newName").value
    var newQuantity = document.getElementById("newQuantity").value
    productHandler.updateProduct(currentProduct.id, newName, newQuantity);
}

我需要阅读此代码的帮助才能了解其功能，因此可以将其转换为javascript

2 个答案: