如果只点击一个按钮，如何避免改变所有按钮的颜色?JavaScript

Question

var cardContent = `[{
"taskName": "Test Head",
"image": "./images/test.jpg",
"description": "Test description",
"importance": 0
},
{
"taskName": "Test Head",
"image": "./images/test.jpg",
"description": "Test description",
"importance": 0
},
{
"taskName": "Test Head",
"image": "./images/test.jpg",
"description": "Test description",
"importance": 0
},
{
"taskName": "Test Head",
"image": "./images/test.jpg",
"description": "Test description",
"importance": 0
},
{
"taskName": "Test Head",
"image": "./images/test.jpg",
"description": "Test description",
"importance": 0
},
{
"taskName": "Test Head",
"image": "./images/test.jpg",
"description": "Test description",
"importance": 0
},
{
"taskName": "Test Head",
"image": "./images/test.jpg",
"description": "Test description",
"importance": 0
},
{
"taskName": "Test Head",
"image": "./images/test.jpg",
"description": "Test description",
"importance": 0
},
{
"taskName": "Test Head",
"image": "./images/test.jpg",
"description": "Test description",
"importance": 0
}
]
`

const journalObj = JSON.parse(cardContent);
var cardContainer = document.getElementById("card-space");
// svgs
const trashSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
<path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
</svg>`;
const checkSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>
</svg>`;
const printCards = () => {
cardContainer.innerHTML = "";
journalObj.forEach((card) => {
cardContainer.innerHTML += `
<div class="card">
<div class="card-header">
<div class="btn bg-info text-start">task</div>
</div>
<img src="${card.image}" class="card-img-top img-fluid" alt="...">
<div class="card-body">
<div class="card-title text-center h5">${card.taskName}</div><br>
<div class="card-text text-center">${card.description}</div>
<hr>
<div class="card-text"> Importance: <button type="button" data-sortable=“true" class="btn btn-success prio-btn importance" value="${card.importance}"><span class="priority-count">${card.importance}</span></button></div>
<div class="card-text fst-italic">Deadline</div>
</div>
<div class="card-footer bg-transparent text-end">
<button type="button" class="bg-danger">${trashSvg} Delete</button>
<button type="button" class="bg-success">${checkSvg} Done</button>
</div>
</div> 
`;
});
};
printCards();
const increasePriority = () => {
// assign querySelector All to variable
const priorityIncrement = document.querySelectorAll(".prio-btn");
// loop every instance of ".prio-btn"
priorityIncrement.forEach((button, i) => {
// assign to every instance an eventlistener
button.addEventListener("click", () => {
// on click increment the calue of importance
journalObj[i].importance++;
//assing Selector to variable
const buttonValue = button.querySelector(".priority-count");
//write the value into the inner value of the cards button
buttonValue.innerHTML = journalObj[i].importance;
button.addEventListener("click", () => {
// abfrage auf werte
//assign prio-btn class to singe selector in variable
const buttonColor = document.querySelector(".prio-btn");
if (journalObj[i].importance < 2) {
buttonColor.setAttribute("class", "bg-success");
} else if (
journalObj[i].importance > 1 &&
journalObj[i].importance < 4
) {
buttonColor.setAttribute("class", "bg-warning");
} else if (
journalObj[i].importance > 4 &&
journalObj[i].importance < 6
) {
buttonColor.setAttribute("class", "bg-danger");
}
});
});
});
};
increasePriority();

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<div class="container main-content" id="main-content">
<div class="deckbox">
<div class="row">
<!-- row for title of row -->
<div class="col text-start my-3  fw-bold fs-3 ">Weekly Tasks</div>
<!-- not yet implemented= line through -->
<div class="col text-end my-3 fw-normal">Sort by priority:<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" type="button" class="bi bi-sort-up-alt sort" viewBox="0 0 16 16">
<path
d="M3.5 13.5a.5.5 0 0 1-1 0V4.707L1.354 5.854a.5.5 0 1 1-.708-.708l2-1.999.007-.007a.498.498 0 0 1 .7.006l2 2a.5.5 0 1 1-.707.708L3.5 4.707V13.5zm4-9.5a.5.5 0 0 1 0-1h1a.5.5 0 0 1 0 1h-1zm0 3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1h-3zm0 3a.5.5 0 0 1 0-1h5a.5.5 0 0 1 0 1h-5zM7 12.5a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 0-1h-7a.5.5 0 0 0-.5.5z" />
</svg>
</div>
<!-- start of row for cards -->
<div class="row row-cols-sm-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-3 row-cols-xxl-3 g-0" id="card-space">
</div>
</div>
</div>
</div>
</div>

当一个按钮被点击时，它里面的数字应该上升。当达到某些值时，按钮的颜色应该改变。

目前，数字在每个单独的按钮实例中上升，但当只按下一个按钮时，每个按钮的颜色都会改变。

按按钮1(第一张牌上的按钮)2次，它变黄。按第三次，所有其他按钮的颜色变成黄色。通过4次点击，按钮4到7变为红色，而按钮1到3保持黄色，按钮8和9保持绿色。通过

显示正确的点击次数

该怎么做

按下一个按钮，超过1为黄色，超过4为红色，其他按钮不变。数字仅在单击

的按钮中更改。

我只能使用JavaScript, bootstrap-5, CSS和HTML。

我的标题完全乱了:(

Answer 1

OK在尝试并遇到奇怪的错误之后更改"单实例"querySelector button变成querySelectorAll的一个带有索引的按钮，并将所有按钮类元素放回其中。

var cardContent = `[{
"taskName": "Test Head",
"image": "./images/test.jpg",
"description": "Test description",
"importance": 0
},
{
"taskName": "Test Head",
"image": "./images/test.jpg",
"description": "Test description",
"importance": 0
},
{
"taskName": "Test Head",
"image": "./images/test.jpg",
"description": "Test description",
"importance": 0
},
{
"taskName": "Test Head",
"image": "./images/test.jpg",
"description": "Test description",
"importance": 0
},
{
"taskName": "Test Head",
"image": "./images/test.jpg",
"description": "Test description",
"importance": 0
},
{
"taskName": "Test Head",
"image": "./images/test.jpg",
"description": "Test description",
"importance": 0
},
{
"taskName": "Test Head",
"image": "./images/test.jpg",
"description": "Test description",
"importance": 0
},
{
"taskName": "Test Head",
"image": "./images/test.jpg",
"description": "Test description",
"importance": 0
},
{
"taskName": "Test Head",
"image": "./images/test.jpg",
"description": "Test description",
"importance": 0
}
]
`

const journalObj = JSON.parse(cardContent);
var cardContainer = document.getElementById("card-space");
// svgs
const trashSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
<path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
</svg>`;
const checkSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>
</svg>`;
const printCards = () => {
cardContainer.innerHTML = "";
journalObj.forEach((card) => {
cardContainer.innerHTML += `
<div class="card">
<div class="card-header">
<div class="btn bg-info text-start">task</div>
</div>
<img src="${card.image}" class="card-img-top img-fluid" alt="...">
<div class="card-body">
<div class="card-title text-center h5">${card.taskName}</div><br>
<div class="card-text text-center">${card.description}</div>
<hr>
<div class="card-text"> Importance: <button type="button" data-sortable=“true" class="btn btn-success prio-btn importance" value="${card.importance}"><span class="priority-count">${card.importance}</span></button></div>
<div class="card-text fst-italic">Deadline</div>
</div>
<div class="card-footer bg-transparent text-end">
<button type="button" class="bg-danger">${trashSvg} Delete</button>
<button type="button" class="bg-success">${checkSvg} Done</button>
</div>
</div> 
`;
});
};
printCards();
const increasePriority = () => {
// assign querySelector All to variable
const priorityIncrement = document.querySelectorAll(".prio-btn");
// loop every instance of ".prio-btn"
priorityIncrement.forEach((button, i) => {
// assign to every instance an eventlistener
button.addEventListener("click", () => {
// on click increment the calue of importance
journalObj[i].importance++;
//assing Selector to variable
const buttonValue = button.querySelector(".priority-count");
//write the value into the inner value of the cards button
buttonValue.innerHTML = journalObj[i].importance;
/*--------------------button colour change-----------------------------------------------------*/
button.addEventListener("click", () => {
// checking values, assiging correct colour
if (journalObj[i].importance < 2) {
priorityIncrement[i].setAttribute(
"class",
"btn btn-success prio-btn importance bg-success"
);
} else if (
journalObj[i].importance > 1 &&
journalObj[i].importance < 4
) {
priorityIncrement[i].setAttribute(
"class",
"btn btn-warning prio-btn importance bg-warning"
);
} else if (
journalObj[i].importance > 4 &&
journalObj[i].importance < 6
) {
priorityIncrement[i].setAttribute(
"class",
"btn btn-danger prio-btn importance bg-danger"
);
}
});
/* -----------------------------------------------------------------------*/
});
});
};
increasePriority();

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<div class="container main-content" id="main-content">
<div class="deckbox">
<div class="row">
<!-- row for title of row -->
<div class="col text-start my-3  fw-bold fs-3 ">Weekly Tasks</div>
<!-- not yet implemented= line through -->
<div class="col text-end my-3 fw-normal">Sort by priority:<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" type="button" class="bi bi-sort-up-alt sort" viewBox="0 0 16 16">
<path
d="M3.5 13.5a.5.5 0 0 1-1 0V4.707L1.354 5.854a.5.5 0 1 1-.708-.708l2-1.999.007-.007a.498.498 0 0 1 .7.006l2 2a.5.5 0 1 1-.707.708L3.5 4.707V13.5zm4-9.5a.5.5 0 0 1 0-1h1a.5.5 0 0 1 0 1h-1zm0 3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1h-3zm0 3a.5.5 0 0 1 0-1h5a.5.5 0 0 1 0 1h-5zM7 12.5a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 0-1h-7a.5.5 0 0 0-.5.5z" />
</svg>
</div>
<!-- start of row for cards -->
<div class="row row-cols-sm-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-3 row-cols-xxl-3 g-0" id="card-space">
</div>
</div>
</div>
</div>
</div>