Ограничить количество добавлений в JQuery

Question

Я не хочу ограничивать количество добавлений, которые происходят в Jquery, когда я нажимаю кнопку

    function standardRoom() {
  var flag = 0
  if ($('select#selectBoxStandard option').length > 1 ) {
    flag++
    $('#selectBoxStandard').find("option:nth-last-child(-n+" + $('#selectBoxStandard').val() + ")").remove();
    if (flag <= 1) {
        $("#roomDetail ul").append('<li><strong>Standard Room - Regular Online Rate</strong> </li>').append('<li class="pull-right"><h4 style="color:darkorange">PHP {{$availableRooms[0]['nightRate']}}</h4></li>').append('<li>Number of night(s): {{$n_nights}} </li>').append('<li>Number of person(s): </li>').append('<li class="hr">Number of room(s): </li>').append(flag);
    }
  }else {
    alert("No more rooms");
  }
}

Я пытался использовать оператор if, основываясь на том, что нашел здесь Но он не работает, он просто продолжает добавляться.

Answer 1

flag сбрасывается при каждом вызове функции.Определите это вне функции.

 var flag = 0    
    function standardRoom() {

          if ($('select#selectBoxStandard option').length > 1 ) {
        flag++
        $('#selectBoxStandard').find("option:nth-last-child(-n+" + $('#selectBoxStandard').val() + ")").remove();
        if (flag <= 1) {
            $("#roomDetail ul").append('<li><strong>Standard Room - Regular Online Rate</strong> </li>').append('<li class="pull-right"><h4 style="color:darkorange">PHP {{$availableRooms[0]['nightRate']}}</h4></li>').append('<li>Number of night(s): {{$n_nights}} </li>').append('<li>Number of person(s): </li>').append('<li class="hr">Number of room(s): </li>').append(flag);
        }
      }else {
        alert("No more rooms");
      }
    }

Answer 2

Вы можете использовать пользовательские атрибуты данных вместо локальной переменной.Когда все готово, вы можете установить значение атрибута данных флага для вашего элемента selectBoxStandard и после того, как сможете его использовать:

// init flag value
$('#selectBoxStandard').data('flag', 0);

function standardRoom() {
    // get flag value
    var flag = $('#selectBoxStandard').data('flag');


    if ($('select#selectBoxStandard option').length > 1 ) {

        // update flag value
        $('#selectBoxStandard').data('flag', flag++)

        $('#selectBoxStandard').find("option:nth-last-child(-n+" + $('#selectBoxStandard').val() + ")").remove();
        if (flag <= 1) {
            $("#roomDetail ul").append('<li><strong>Standard Room - Regular Online Rate</strong> </li>').append('<li class="pull-right"><h4 style="color:darkorange">PHP {{$availableRooms[0]['nightRate']}}</h4></li>').append('<li>Number of night(s): {{$n_nights}} </li>').append('<li>Number of person(s): </li>').append('<li class="hr">Number of room(s): </li>').append(flag);
        }
    }else {
        alert("No more rooms");
    }
}

Answer 3

Каждый раз, когда вы вызываете функцию standardRoom, переменная flag сбрасывается в 0, поэтому она всегда будет добавлять элементы.Убедитесь, что вы храните эту переменную где-то более глобально, где вам не нужно сбрасывать ее:

   var flag = 0;
   function standardRoom() {
       if ($('select#selectBoxStandard option').length > 1 ) {
           flag++
           $('#selectBoxStandard').find("option:nth-last-child(-n+" + 
           $('#selectBoxStandard').val() + ")").remove();
           if (flag <= 1) {
               $("#roomDetail ul").append('<li><strong>Standard Room - Regular Online Rate</strong> </li>').append('<li class="pull-right"><h4 style="color:darkorange">PHP {{$availableRooms[0]['nightRate']}}</h4></li>').append('<li>Number of night(s): {{$n_nights}} </li>').append('<li>Number of person(s): </li>').append('<li class="hr">Number of room(s): </li>').append(flag);
           }
       } else {
          alert("No more rooms");
       }
    }