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

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

我只是想在点击按钮时改变按钮的颜色。目前，按钮已注册，但无法识别背景颜色的变化。代码也会遍历和过滤数据，因此还有额外的功能。我知道这非常简单，但我似乎无法识别按钮背景并更改它！

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

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

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

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按钮单击('b2'(

相关内容

最新更新

热门标签：