Question

将项目添加到有序列表的最佳方法是什么？

我希望当项目更改值时，该控件的值将放在列表中。

实施例

-radiobutton value = radiobuttonvalue;
-checkbox value = checkboxvalue;
-textbox value = textboxvalue;

点击：首先是复选框，而不是单选按钮和最后一个文本框。

输出：

<ul>
<li>radiobuttonvalue</li>
<li>checkboxvalue</li>
<li>textboxvalue</li>
</ul>

所以我首先点击控件并不重要，输出总是按照相同的顺序。

Answer 1

使用jQuery：

$('input').change(function(){
    var value = this.value;
    $('#output').prepend($('<p>', {text:value}));
})

HTML：

<input type='...'/>
<input type='...'/>
<input type='...'/>
<input type='...'/>
<div id='output'></div>

更新了小提琴以使用列表。

这是新的js代码：

$('input').change(function(){
    var value = this.value;
    $('#output').append($('<li>', {text:value}));
});

小提琴：http://jsfiddle.net/maniator/Ee7gY/

Answer 2

所以你想按照表格中字段的顺序输出字段的值？如果是这样，这可能是您正在寻找的：

$(function() {
  var fieldValues = [];

  $('.field').change(function() {
     // get the index of the field
     var fieldIndex = $(this).index();

     // store the value of the field in the array using it's index
     fieldValues[fieldIndex] = $(this).val();

     // our output list
     var $list = $("#output");

     // clear the list
     $list.html("");

     // loop through our values and add them to the list
     for(value in fieldValues) {
        $list.append("<li>"+fieldValues[value]+"</li>");        
     }
  });
});

HTML：

<input class="field" />
<input class="field" />
<input class="field" />
<input class="field" />

<ul id="output"></ul>

将项目添加到列表中

2 个答案: