时间戳

首页 > 解决方案 > 交换颜色函数中的参数问题（对于按钮）

javascript - 交换颜色函数中的参数问题（对于按钮）

问题描述

对于 HTML 按钮：

<button type="button" id="100">100%</button>

我有一个 java 脚本函数，可以交换该按钮的 2 种背景颜色：

const but1 = document.getElementById("100");

n=0;

but.addEventListener("click", function (){
    if (n==0) {
        but1.style.backgroundColor = "rgb(225, 165, 0)";
        n=1;
    } else {
        but1.style.backgroundColor = "rgb(225, 165, 0,0)";
        n=0;
    } 
});

工作正常。但我想创建更多按钮，并且不想每次都复制相同的功能。所以为了让它更简单，我写了一个带参数的函数，比如说“b”（用于按钮）、“c1”和“c2”（用于颜色）和“x” ——代表“n”值（对于每个按钮）。所以我的 java 脚本（用于 HTML 按钮）带有两个按钮的示例集

const but1 = document.getElementById("button");

n=0;

function colorSwitch (b, c1, c2, x){
    if (x==0) {
        b.style.backgroundColor = c1;
        x=1;
    } else {
        b.style.backgroundColor = c2;
        x=0;
    }
}

// orange set

const cOrange = "rgb(225, 165, 0)";
const cOrangeT = "rgb(225, 165, 0,0)";

but1.addEventListener("click", function(){
    colorSwitch(but1, cOrange, cOrangeT, n);
});

我遇到的问题是“x”参数。它似乎抓住了最初的“0”值，然后将其设置为“1”。但是当我再次单击按钮时，初始值再次为“0”。所以没有循环，颜色也不会交换。

我对"x"的行为有什么不理解，以及如何正确编码？

标签： javascript

解决方案

要将元素计算的颜色与颜色字符串进行比较- 请参阅此答案

使用 CSS 类切换样式和classList.toggle()

使用一个通用类（即class="btnTog"：）作为所有目标按钮的选择器。
改为使用Element.classList.toggle()来切换.is-activeCSS 类：

function colorwitch() {
  this.classList.toggle('is-active');
}

const btns = document.querySelectorAll(".btnTog");
btns.forEach(btn => btn.addEventListener('click', colorwitch));
.btnTog {
  border: 0;
  padding: 0.5em;
  background-color: rgba(225, 165, 0, 0.5);
}

.is-active {
  background-color: rgba(255, 180, 0, 1)
}
<button class="btnTog" type="button">100%</button>
<button class="btnTog" type="button">100%</button>

使用属性切换颜色data-*以存储状态 (1/0)

如果出于某些未知原因，您想在 Element 中存储状态，您可以使用超级方便的data-*属性或 dataset属性：

function colorSwitch () {
  this.style.backgroundColor = [
    "rgba(225, 165, 0, 0.5)",
    "rgba(255, 180, 0, 1)",
  ][this.dataset.tog ^= 1]; // Toggle 1, 0, 1, 0, ...
}

const btns = document.querySelectorAll(".btnTog");
btns.forEach(btn => btn.addEventListener('click', colorSwitch));
.btnTog {
  border: 0;
  padding: 0.5em;
  background-color: rgba(225, 165, 0, 0.5);
}
<button class="btnTog" type="button">100%</button>
<button class="btnTog" type="button">100%</button>

推荐阅读