設置要按的按鈕的最大數量

Question

我有以下代碼，它允許我顯示我的數據庫中的模型數量。每個模型細節都標有一個href按鈕供用戶選擇。

1）一旦用戶點擊了href按鈕，按鈕的文字將被改爲「選中」。

2）如果用戶點擊顯示「選定」的按鈕，按鈕的文本將被更改爲「選擇」。

<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; 
    } 
})();