【问题标题】:I want to put the li elements in an array我想把 li 元素放在一个数组中
【发布时间】:2016-07-27 03:00:42
【问题描述】:

我有一个可选择的列表。例如,我希望在该列表中选择 3 个项目,然后单击确认按钮,将 li 元素添加到数组中。如果我选择其他项目,我也想将它们添加到该数组中。

$(document).ready(function() {
  $("#add").on("click", function(e) {
    $("#list").append("<li>" + $("#prenume").val() + " " + $("#nume").val() + "</li>");
    return false;
  })

  $(function() {
    $("#list").selectable();
  });

  $("#confirm").on("click", function() {
  });
});
#feedback {
  font-size: 1.4em;
}
#list .ui-selecting {
  background: #FECA40;
}
#list .ui-selected {
  background: #F39814;
  color: white;
}
#list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 20%;
}
#list li {
  margin: 3px;
  padding: 0.4em;
  font-size: 1.4em;
  height: 18px;
}
li:hover {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  Prenume
  <input type="text" id="prenume"></input>
  Nume
  <input type="text" id="nume"></input>
  <select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
  <button id="add">Add</button>
</form>

<ul id="list">
</ul>

<ul id="confirmed_list">
</ul>
<button id="confirm">Confirm</button>

【问题讨论】:

  • 由于jquery-ui,代码无法正常工作。

标签: jquery html css arrays


【解决方案1】:

我不确定您要对数组后缀做什么,但您可以尝试以下操作:

<script>
    $(document).ready(function () {

        var tempArray = Array();

        $("#add").on("click", function (e) {
            var prenume = $("#prenume").val();
            var nume = $("#nume").val();
            var both = prenume + " " + nume;

            $("#list").append("<li>" + both + "</li>");
            tempArray += both;
            return false;
        })

           // This was not working so I commented it out for now
           // $(function () {
           //    $("#list").selectable();
           // });


        $("#confirm").on("click", function () {
            $("#confirmed_list").append(tempArray);
            tempArray = "";
        });
    });
</script>

【讨论】:

    猜你喜欢
    • 2016-02-28
    • 2017-05-15
    • 1970-01-01
    • 2018-08-29
    • 1970-01-01
    • 1970-01-01
    • 2018-05-04
    • 2023-01-20
    • 1970-01-01
    相关资源
    最近更新 更多