Question

我试图在每次单击后更新附加列表项的值。该值来自选择选项，每单击一次，它将值附加到 ul 。我的问题是我只需要将值附加1次，这样就不会显示其他附加值。它应该只更新已经附加的值。

var standard = 0;
var n_standard = 0;
function standardRoom() {
    n_standard = n_standard + Number($("#selectBoxStandard").val());
    standard++
    if (standard <= 1 ) {
        $("#roomDetail ul").append('<li class="hr">Number of room(s): '+ n_standard +'</li>');
    }
}

<label for="rooms" style="color:black">No. of rooms: </label>
  <select required tabindex="10" id="selectBoxStandard" name="n_rooms"> 
    <option value="0">0</option>
    <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>
    <option value="6">6</option>
    <option value="7">7</option>
  </select>

<div  class="button-style-1" style="padding-bottom:80px" style="padding-bottom:40px"><a href="javascript:standardRoom()" ><i class="fa fa-calendar"></i><span class="mobile-visibility">BOOK</span></a></div>

<div id="roomDetail">
  <ul class="tabs">

   </ul>
 </div>

Answer 1

如果要在列表的最后<li>中添加文本，可以使用：

let items = document.querySelectorAll("ul.tabs > li");
items[items.length - 1].innerHTML += "add this text";

Answer 2

使用append代替.html，并且在单击function时，在每次函数调用后将counter(standard)标记为0，以便再次打印。如果每次点击都未将其设置为0，则它的值将递增，并且始终会得到结果

var standard = 0;
var n_standard = 0;
function standardRoom() {
    n_standard = n_standard + Number($("#selectBoxStandard").val());
    standard++
    if (standard <= 1 ) {
        $("#roomDetail ul").html('<li class="hr">Number of room(s): '+ n_standard +'</li>')
        standard=0;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="rooms" style="color:black">No. of rooms: </label>
  <select required tabindex="10" id="selectBoxStandard" name="n_rooms"> 
    <option value="0">0</option>
    <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>
    <option value="6">6</option>
    <option value="7">7</option>
  </select>

<div  class="button-style-1" style="padding-bottom:80px" style="padding-bottom:40px"><a href="javascript:standardRoom()" ><i class="fa fa-calendar"></i><span class="mobile-visibility">BOOK</span></a></div>

<div id="roomDetail">
  <ul class="tabs">

   </ul>
 </div>

当追加限制为1时更新变量的值

2 个答案: