如何分别从HTML元素可为特定HTML元素字段使用JavaScript和jQuery获取值

Question

没有与命名的两个字段添加项目1和添加项目2

当在按钮1的用户点击元素值从添加项目1和添加项目2复制到另一个地方用命名项目列表1。

现在我想通过点击按钮1和添加项目2到项目清单通过点击按钮2 2从添加项目获得值1到项列表1。

我的小提琴的工作代码链接在评论。我已经缩进4个空格的所有代码，但它不允许我粘贴我的小提琴链接的帖子。

如果我在这篇文章中犯了一个错误，请编辑它。感谢您的帮助。

Answer 1

添加一个唯一的标识符来分隔2点的形式，我在这里使用一个数据属性的形式在什么名单，以确定把元素，使用find和this选择相对于所提交的表单

内容HTML：

<!-- Item List 1 --> 
<div id="grocery-list"> 
    <h3>Item List1</h3> 
    <ul> 
    <li class="empty">Empty</li> 
    </ul> 
</div> 

<!-- Item List 2--> 
<div id="grocery-list2"> 
    <h3>Item List2</h3> 
    <ul> 
    <li class="empty">Empty</li> 
    </ul> 
</div> 

<!-- Add Item 1 --> 
<form data-id="grocery-list"> 
    <fieldset> 
    <legend style="width :500px; margin-top:0px">Add Item 1</legend> 
    <label for="item">Item Name:</label> 
    <br> 

    <!-- Input text field --> 
    <input class="item" type="text" style="cursor: pointer;" value=" "> 

    <label></label> 
    <br> 
    <br> 
    <select style="position:absolute;margin-left:65px;margin-top:-18px;cursor: pointer;" class="first_select"> 
     <option class="item" sty>mg</option> 
     <option class="item" value="saab">ml</option> 

    </select> 
    <select style="position:absolute;margin-left:120px;margin-top:-18px; cursor: pointer;" class="second_select"> 
     <option>STAT(once immediately)</option> 
     <option>OD(once in a day)</option> 
     <option>BiD(twice in a day)</option> 
     <option>TiD(thrice in a day)</option> 
     <option>QiD(four times a day)</option> 
    </select> 

    <select style="position:absolute;margin-left:290px;margin-top:-18px;cursor: pointer;" class="third_select"> 
     <option>1 day</option> 
     <option>2 days</option> 
     <option>3 days</option> 
    </select> 

    <input class="item" type="checkbox" style="position:absolute;margin-left:360px;margin-top:-15px;cursor: pointer;"> 
    <label style="position:absolute;margin-left:375px;margin-top:-16px">Before Food</label> 
    <input class="item" type="checkbox" style="position:absolute;cursor: pointer;margin-left:460px;margin-top:-15px"> 
    <label style="position:absolute;margin-left:475px;margin-top:-16px">After Food </label> 

    <button class="button button3" style="position:absolute;margin-left:0px;margin-top:20px; width:100px; height:60px ">Button 1</button> 
    </fieldset> 
</form> 

<!-- Add Item 2 --> 

<form data-id="grocery-list2"> 
    <fieldset> 
    <legend style="width :500px; margin-top:100px">Add Item 2</legend> 
    <label for="item">Item Name:</label> 
    <br> 

    <!-- Input text field --> 
    <input class="item" type="text" style="cursor: pointer;" value=" "> 

    <label></label> 
    <br> 
    <br> 
    <select style="position:absolute;margin-left:65px;margin-top:-18px;cursor: pointer;" class="first_select"> 
     <option class="item" sty>mg</option> 
     <option class="item" value="saab">ml</option> 

    </select> 
    <select style="position:absolute;margin-left:120px;margin-top:-18px; cursor: pointer;" class="second_select"> 
     <option>STAT(once immediately)</option> 
     <option>OD(once in a day)</option> 
     <option>BiD(twice in a day)</option> 
     <option>TiD(thrice in a day)</option> 
     <option>QiD(four times a day)</option> 
    </select> 

    <select style="position:absolute;margin-left:290px;margin-top:-18px;cursor: pointer;" class="third_select"> 
     <option>1 day</option> 
     <option>2 days</option> 
     <option>3 days</option> 
    </select> 

    <input class="item" type="checkbox" style="position:absolute;margin-left:360px;margin-top:-15px;cursor: pointer;"> 
    <label style="position:absolute;margin-left:375px;margin-top:-16px">Before Food</label> 
    <input class="item" type="checkbox" style="position:absolute;cursor: pointer;margin-left:460px;margin-top:-15px"> 
    <label style="position:absolute;margin-left:475px;margin-top:-16px">After Food </label> 

    <button class="button1 button3" style="position:absolute;margin-left:0px;margin-top:20px; width:100px; height:60px ">Button 2</button> 
    </fieldset> 
</form> 

JS：

 $("button").button(); 

    function addToList(items, list) { 
    var $list = $('#'+list).find("ul"); 
    $list.empty(); 
    jQuery.each(items, function(i, text) { 
     $list.append("<li>" + text + " <a class='delete_li'>&#10006;</a> </li>"); 
    }); 
    } 

    $("body").on("click", ".delete_li", function() { 
    $(this).closest("li").remove(); 
    }); 

    $("form").on("submit", function(a) { 
    list = $(this).attr('data-id'); 
    a.preventDefault(); 
    $(this).find("fieldset").effect("transfer", { 
     to: "#"+list+" ul", 
     complete: function() { 
     var items = []; 
     // add text box values first 
     $(this).find('input[type=text]').each(function() { 
      items.push($(this).val()); 
     }); 
     // then add checkbox label texts if checked 
     $(this).find("input:checked").each(function() { 
      items.push($(this).next().html()); 
     }); 
     // finally, add the selected option values 
     $(this).find('select :selected').each(function() { 
      items.push($(this).val()); 
     }); 
     addToList(items,list); 
     } 
    }); 
    }); 

演示：http://jsfiddle.net/6kjwouhd/1/

Answer 2

在你addToList()功能（以及在effect()的to参数），无论你选择哪一个按钮，你接收一览表设置为#grocery-list ul这是项目列表1。

您可能需要修改它来识别已被点击了哪个按钮，或许通过将按钮编号（1或2）作为参数传递给addToList，这样就可以使用正确的列表ID（grocery-list或grocery-list2）。