Javascript有序列表和内容

Question

所以我的问题是在有序列表中创建具有确切内容的新元素。我有这个功课，我正在研究JS只有几天。我必须制作一个有序列表和一个按钮添加项目。当我单击按钮时，它必须在有序列表中创建一个新元素，其中包含下一个数字containsig。所以现在当我点击按钮时会出现提示窗口，我写的文字会出现在下一个＆＃34; li＆＃34;中，但是我无法确定下一个＆＃34; li＆＃34;将显示项目1，项目2，项目3等。此外，我还需要隐藏第一个元素原因＆＃34;项目1：文本始终显示。＆＃34;

＆＃13;

＆＃13;

function addItem() {
  var item = prompt("Please insert a text", "It will be added to the list");
  if (item != null) {
    var n = 0;
    var ol = document.getElementById("myList");
    var li = document.createElement("li");
    ol.appendChild(li);
    li.innerHTML += "item " + n + ':' + item;
  } else {
    document.getElementById("text").innerHTML = "&nbsp";
  }
}

＆＃13;

#nested {
  width: 95%;
  height: 100%;
  border: 1px solid red;
  margin-left: auto;
  margin-right: auto;
}
#large {
  width: 80%;
  height: 100%;
  border: 1px solid blue;
  margin-left: auto;
  margin-right: auto;
}
ol {
  list-style-type: arabic;
  list-style-position: inside;
  margin-top: 10px;
  margin-right: 30px;
}
.right {
  float: right;
}

＆＃13;

<div id="large">
  <div id="nested">
    <form method="get">
      <input type="button" id="resizeBut" name="resize" value="Collapse" onclick="change()" />
      <br />
      <br />
      <input type="button" id="newItem" name="items" value="Add Item" onclick="addItem()" />
    </form>
    <ol reversed="reversed" class="right" id="myList">
      Unordered list
      <li>item 1:<span id="text">Text</span>
      </li>
    </ol>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

• 在'(36 40)
之外的Decalre var { query: 'prime-query-single', header: {'Content-Type': 'application/json'}, body: { "when": { "query": "SELECT * FROM system.local WHERE key='local'" }, "then": { "rows": [ { "cluster_name": "custom cluster name", "partitioner": "org.apache.cassandra.dht.Murmur3Partitioner", "data_center": "dc1", "rack": "rc1", "tokens": [ "1743244960790844724" ], "release_version": "2.0.1" } ], "result": "success", "column_types": { "tokens": "set<text>" } } } }
• n在每个函数调用中

function

Increment

var n = 1;

function addItem() {
  var item = prompt("Please insert a text", "It will be added to the list");
  if (item != null) {
    ++n;
    var ol = document.getElementById("myList");
    var li = document.createElement("li");
    li.innerHTML = "item " + n + ':' + item;
    ol.appendChild(li);
  } else {
    document.getElementById("text").innerHTML = "&nbsp";
  }
}

Answer 2

答案取决于您是否能够使用库。如果你可以使用jQuery这很容易，如果没有，它仍然是可行的，只是更多的代码。我会写两个答案......

jQuery答案......

function addItem() {
  var item = prompt("Please insert a text", "It will be added to the list");
  if (item != null) {
    var count = $('#myList').find('ol').find('li').length;
    if(count > 1) {
        $('#myList').find('ol').find('li').hide();
    }
    var nextItem = count + 1;
    $('#myList').find('ol').append('<li>Item ' + nexItem + ':' + item + '</li>');
  } else {
    $('#text').html('&nbsp;');
  }
}

非jQuery（Vanilla JavaScript）......

function addItem() {
  var item = prompt("Please insert a text", "It will be added to the list");
  if (item != null) {
    var n = document.getElementById("myList").getElementsByTagName("li").length;
    if(n > 0) {
        var elements = document.getElementById("myList").getElementsByTagName("li");
        for(var i = 0; i < n; i++) {
            elements[i].style.visibility = "hidden";
            elements[i].style.display = "none";
        }
    }
    var nextItem = n + 1;
    var ol = document.getElementById("myList");
    var li = document.createElement("li");
    ol.appendChild(li);
    li.innerHTML += "item " + nextItem + ':' + item;
  } else {
    document.getElementById("text").innerHTML = "&nbsp";
  }
}

还有一种方法可以通过将计数存储为变量来加速它，然后每次增加它以获得新数字，这样你就不会每次都计算DOM元素。这将是一个简单的补充。这是一个例子......

//inside a <script > tag
var count = 0;
function addItem() {
    var item = prompt("Please insert text here", "It will be added to the list");
    if(item != null) {
        if(count > 0) {
            var items = document.getElementById("myList").getElementsByTagName("li");
            for(var i = 0; i < items; i++) {
                items[i].style.visibility = "hidden";
                items[i].style.display = "none";
            }
        }
            count += 1;
            var list = document.getElementById("myList");
            var li = document.createElement("li");
            li.innerHTML = "item " + count + ": " + item;
            list.getElementsByTagName("ol").append(li);
    } else {
        document.getelementById("text").innerHTML = "&nbsp;";
    }
}

我希望这会有所帮助。有许多方法可以解决这个问题，这些方法只有一对。如果这不起作用或者您需要更多帮助，请告诉我。

Answer 3

您还可以始终计算列表中li的数量，并将其用于n。要删除，您只需要在第一次传递时隐藏或删除该项目。

var ADDED_ITEMS = 0;

function addItem() {
  var placeholder = "It will be added to the list";
  var item = prompt("Please insert a text", placeholder);

  if (item != null) {
    var ol = document.getElementById("myList");

    // Remove the existing LI on the first pass
    if (++ADDED_ITEMS == 1)
      ol.removeChild( ol.querySelector('li') );

    // Get count of LI in list
    var n = ol.querySelectorAll('li').length + 1;
    
    // Create new LI
    var li = document.createElement("li");
    ol.appendChild(li);
    li.innerHTML += "item " + n + ':' + item;
  } else {
    document.getElementById("text").innerHTML = "&nbsp";
  }
}

#nested {
  width: 95%;
  height: 100%;
  border: 1px solid red;
  margin-left: auto;
  margin-right: auto;
}
#large {
  width: 80%;
  height: 100%;
  border: 1px solid blue;
  margin-left: auto;
  margin-right: auto;
}
ol {
  list-style-type: arabic;
  list-style-position: inside;
  margin-top: 10px;
  margin-right: 30px;
}
.right {
  float: right;
}

<div id="large">
  <div id="nested">
    <form method="get">
      <input type="button" id="resizeBut" name="resize" value="Collapse" onclick="change()" />
      <br />
      <br />
      <input type="button" id="newItem" name="items" value="Add Item" onclick="addItem()" />
    </form>
    <ol reversed="reversed" class="right" id="myList">
      Unordered list
      <li>item 1:<span id="text">Text</span></li>
    </ol>
  </div>
</div>