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

但如果你为每个元素使用类，它会容易得多。更少的代码，更多的控制。添加课程＆＃34;选择＆＃34;如果选中了元素，则在未选中时将其删除。你不需要在你的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;
  }
})();

设置要按的最大按钮数

2 个答案: