Установка максимального количества нажатой кнопки

Question

У меня есть следующий код, который позволяет мне отображать количество моделей, которые у меня есть в моей базе данных. Каждая деталь модели помечена кнопкой href для выбора пользователем.

1) Как только пользователь нажал кнопку href, текст кнопки будет изменен на «selected».

2) Если пользователь нажал кнопку, отображающую «выбранный», текст кнопки будет изменен на «select».

<div class="row text-center"> 
    <?php 
     while($rowModelList=mysql_fetch_array($resultModelList)) 
     { 
    ?> 
    <div class="col-md-3 col-sm-6 hero-feature"> 
     <div class="thumbnail"> 
      <img src="Images/Models/<? echo $rowModelList['modelImage'];?>" alt="" style="height: 200px;"> 
      <div class="caption"> 
       <h4><?php echo $rowModelList['modelName']?></h4> 
       <p> 
        <a href="#" id="<?php echo $rowModelList['modelName']?>" onClick="return changecolor(this)" class="btn btn-primary">Select</a> 
       </p> 
      </div> 
     </div> 
    </div> 
    <?php 
     } 
    ?> 
</div> 

У меня есть следующий код, который позволяет мне менять цвет и текст кнопки href при нажатии.

/* Changing the colour of the href button upon clicked */ 
function changecolor(element) { 
    alert(element.target.id); 
    if (element.innerHTML == "Select") { 
    element.innerHTML = "Selected"; 
    element.style.backgroundColor = "#C0C0C0"; /*Grey*/ 
    element.style.borderColor = "#C0C0C0"; 
    alert(element); 
    } else { 
    element.innerHTML = "Select"; 
    element.style.backgroundColor = "#FED136"; /*Yellow*/ 
    element.style.borderColor = "#FED136"; 
    alert(element); 
    } 
    return false; 
} 

Однако, я пытаюсь ограничить количество кнопок, которые будут выбраны пользователем.

Например, пользователю показано 20 моделей, но им разрешено выбирать только 8 моделей. Как только 8 из текста кнопки будут показаны «выбраны», им нужно будет отменить выбор одной из выбранных кнопок, чтобы сделать новый выбор.

Любая идея, как я могу изменить код для его достижения?

Заранее спасибо

Answer 1

просто подсчитывают выбранные параметры в функции:

var selectedCount = 0; // global variable 
function changecolor(element) { 
    alert(element.target.id); 
    if(selectedCount > 8) 
    { 
     alert("already selected 8 options"); 
     return false; 
    } 

    if (element.innerHTML == "Select") { 
    element.innerHTML = "Selected"; 
    selected++; 
    element.style.backgroundColor = "#C0C0C0"; /*Grey*/ 
    element.style.borderColor = "#C0C0C0"; 
    alert(element); 
    } else { 
    element.innerHTML = "Select"; 
    element.style.backgroundColor = "#FED136"; /*Yellow*/ 
    element.style.borderColor = "#FED136"; 
    selected--; 
    alert(element); 
    } 
    return false; 
} 

Но его намного проще, если вы используете класс для каждого элемента. Меньше кода и больше контроля. Добавить класс «selected», если элемент отмечен, и удалить его, если он не установлен. Вам не нужно стилизовать его в своем javascript-коде.

JQuery пример с использованием класса:

jQuery(document).ready(function(){ 
    jQuery('.option').click(function(){ 
     if(jQuery(this).hasClass('selected')) 
     { 
      // mark as unchecked 
      jQuery(this).html('not selected'); 
      jQuery(this).removeClass('selected'); 
     } 
     else 
     { 
      // mark as checked 
      if(jQuery('.selected').length >= 2) // check limit 
      { 
       alert('to many selected'); 
       return false 
      } 
      jQuery(this).html('selected'); 
      jQuery(this).addClass('selected'); 
     } 
     return false; 
    }); 
}); 

Answer 2

Просто создать переменную, которая отслеживает, сколько выбраны

/* Changing the colour of the href button upon clicked */ 
var selectedCount = 0; 
function changecolor(element) { 
    if (selectedCount >=8) { 
     return; 
    } 
    if (element.innerHTML == "Select") { 
    selectedCount++; 
    element.innerHTML = "Selected"; 
    element.style.backgroundColor = "#C0C0C0"; /*Grey*/ 
    element.style.borderColor = "#C0C0C0"; 
    alert(element); 
    } else { 
    selectedCount--; 
    element.innerHTML = "Select"; 
    element.style.backgroundColor = "#FED136"; /*Yellow*/ 
    element.style.borderColor = "#FED136"; 
    alert(element); 
    } 
    return false; 
} 

Вы должны избегать глобальных переменных, и вы можете сделать это с помощью замыкания/модуля шаблон.

/* Changing the colour of the href button upon clicked */ 
var changecolor = (function(){ 
    var selectedCount = 0; 
    function(element) { 
    if (selectedCount >=8) { 
     return; 
    } 
    if (element.innerHTML == "Select") { 
     selectedCount++; 
     element.innerHTML = "Selected"; 
     element.style.backgroundColor = "#C0C0C0"; /*Grey*/ 
     element.style.borderColor = "#C0C0C0"; 
     alert(element); 
    } else { 
     selectedCount--; 
     element.innerHTML = "Select"; 
     element.style.backgroundColor = "#FED136"; /*Yellow*/ 
     element.style.borderColor = "#FED136"; 
     alert(element); 
    } 
    return false; 
    } 
})();