Question

我花了很多时间研究这个问题，但是我似乎找不到答案。

我只是想在单击按钮时更改按钮的颜色。当前，按钮已注册，但无法识别背景颜色的变化。该代码还将遍历并过滤数据，因此需要额外的功能。我知道这非常简单，但是我似乎无法识别按钮背景并进行更改！

CSS：

.button {
      position: relative;
        width: 70px;
        padding: 5px 5px;
        margin-right: 3px;
        margin-bottom: 3px;
        cursor: pointer;
        text-align: center;
        font-size: .65em;
        border: .5px solid #e0e0e0;
        float: left;
        -moz-border-radius: 3px;
        border-radius: 3px;
      background: rgb(255, 255, 255);
    }

    .button:hover {
        background: #e0e0e0;
    }

    .button.current {
        background: #242424;
        color: #fff;
    }

HTML：

<div class="buttons">
    <div a href="#" data-placement="bottom" data-val="1" id="option" name="updateButton" type="button" value="Update" class="button" onclick="buttonClick('b1')">Button 1</div>

    <div a href="#" id="option" class="button" data-val="2" type="button" value="Update" onclick="buttonClick('b2')">Button 2</div>

    <div a href="#" id="option" class="button" data-val="3" type="button" value="Update" onclick="buttonClick('b3')">Button 3</div>

  <div a href="#" id=option class="button" data-val="3" type="button" value="Update" onclick="buttonClick('b4')">Button 4</div>
  </div>

Javascript：

// Shared function
function filterData() {
  var newData = _(site_data).filter(function(site) {
    return site[buildingType] < minYear;
  });
  displaySites(newData);
  return newData.length;
}


function buttonClick(filterField) {
  if (filterField !== undefined) {
    //console.info('Changing building filter to', filterField);
    buildingType = filterField;

  }
  //console.info('Applying filter');
  filterData();

  //click to change color of button background
  var backgroundColor = document.getElementById('option')

  function buttonClick(backgroundColor) {
    if (backgroundColor.onclick == true) {
        option.style.backgroundColor = "#0fe417";
      } else {
        option.style.backgroundColor = "#0029ff";
      }
  }
}

Answer 1

我只是将元素传递给函数并更改背景颜色： [使用颜色重置进行更新！]

   <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        
    <script src="http://kithomepage.com/inga/jquery.validate.min.js"></script>
        
    <div class="buttons">
        <div a href="#" data-placement="bottom" data-val="1" id="option" name="updateButton" type="button" value="Update" class="button" onclick="buttonClick('b1',this)">Button 1</div>
    
        <div a href="#" id="option" class="button" data-val="2" type="button" value="Update" onclick="buttonClick('b2',this)">Button 2</div>
    
        <div a href="#" id="option" class="button" data-val="3" type="button" value="Update" onclick="buttonClick('b3',this)">Button 3</div>
    
      <div a href="#" id=option class="button" data-val="3" type="button" value="Update" onclick="buttonClick('b4',this)">Button 4</div>
      </div>
      
      <style> .button {
          position: relative;
            width: 70px;
            padding: 5px 5px;
            margin-right: 3px;
            margin-bottom: 3px;
            cursor: pointer;
            text-align: center;
            font-size: .65em;
            border: .5px solid #e0e0e0;
            float: left;
            -moz-border-radius: 3px;
            border-radius: 3px;
          background: rgb(255, 255, 255);
        }
    
        .button:hover {
            background: #e0e0e0;
        }
    
        .button.current {
            background: #242424;
            color: #fff;
        }
    	</style>
    
      
    <script>
    // Shared function
    function filterData() {
      //just comment for hide a error
      //var newData = _(site_data).filter(function(site) {
      //  return site[buildingType] < minYear;
      //});
      //displaySites(newData);
      //return newData.length;
    }
    
    
    function buttonClick(filterField,element) {
      
      element.style.backgroundColor ="red"
       var backgroundColor = document.getElementById('option');
       buttonClickColor(backgroundColor,element);
      
      if (filterField !== undefined) {
        //console.info('Changing building filter to', filterField);
        buildingType = filterField;
    
      }
      //console.info('Applying filter');
      filterData();
    
      //click to change color of button background
     
    
      function buttonClickColor(backgroundColor,element) {
    	//reset color
    	Array.from(document.getElementsByClassName("button")).forEach(function (button,index){
    		button.style.backgroundColor = "white";
    	})
      
        if (backgroundColor.onclick == true) {
            element.style.backgroundColor = "#0fe417";
          } else {
            element.style.backgroundColor = "#0029ff";
          }
      }
    }
    </script>

Answer 2

const buttons = [...document.querySelectorAll(".button")];
buttons.forEach(item => {
  item.addEventListener("click", e => {
    console.log(e.target.dataset.val)
    buttons.forEach(item => {
      item.classList.remove("current");
    });
    e.target.classList.add("current");
    filterData(); //and other code...
  });
});

使用e.target.dataset代替 buttonClick（'b2'）

过滤数据时更改按钮的颜色

2 个答案: