如何在卡片内的按钮上进行 onclick 事件：更改卡片背景颜色、按钮背景和文本颜色以及文本内容
Posted
技术标签:
【中文标题】如何在卡片内的按钮上进行 onclick 事件：更改卡片背景颜色、按钮背景和文本颜色以及文本内容【英文标题】：How to make onclick event on button inside card that: Change card background color, button background and text color and text content 【发布时间】：2022-01-19 23:30:07 【问题描述】：我在一个容器内有一组卡片，每张卡片内有一个按钮。如果我单击按钮，我想更改该按钮所在卡片的背景颜色以及更改按钮的背景颜色、按钮的文本内容和文本颜色，并将其保持在该状态直到另一个按钮被按下。然后将更改应用于按下的任何按钮（以及他们的卡片）。
/* Cards */
.container-fluid
border-radius: 4px;
box-sizing: border-box;
vertical-align: top;
width: 1855px;
height: 650px;
margin-left: -3.5%;
margin-right: 5%;
pointer-events: auto;
.col-centered
float: left;
align-items: center;
margin: 0 auto !important;
width: 72%;
.card
float: left;
width: 25em;
height: 13em;
pointer-events: auto;
.card-tittle-font
margin-left: 0px;
font-weight: bold;
.card-info
font-size: 12px;
line-height: 16px;
font: Roboto;
display: inline-block !important;
padding: 14px;
color: gray;
.cardicon
font-size: 32px;
color: #0B8149;
.buttonsCards
font: Roboto;
font-weight: 400;
font-size: 16px;
outline: none;
border: 0px;
background-color: transparent;
position: absolute;
right: 10%;
transform: translate(-10%, 250%);
/*Details */
.nopadding
padding: 0 !important;
margin: 0 !important;
.right
float: right;
.left
float: left;
clear
clear: both;
/*Card Highlight */
.highlight
background-color: #E2FDF1;
.card-highlight
pointer-events: auto;
transition: all 1.5s;
.card-highlight:hover
opacity: 1;
background-color: #E2FDF1;
.container-fluid:hover .card-highlight:not(:hover)
opacity: 0.5;
.buttonsCards:houver span
display: none;
pointer-events: auto;
.buttonsCards::after
outline: none;
border: 0px;
content: "Selecionar";
.buttonsCards:hover::after
outline: none;
border: 0px;
content: "Selecionado";
color: white;
background-color: #0B8149;
.buttonsCards:hover
background-color: transparent;
/*Details */
.nopadding
padding: 0 !important;
margin: 0 !important;
.right
float: right;
.left
float: left;
clear
clear: both;
<body>
<div class="container-fluid">
<div class="row">
<div class=col-1></div>
<div class=col-10>
<div class="container-fluid mt-4 justify-content-between">
<div class="row col-centered">
<div class="col-4 mb-3 ">
<div class="card">
<div class="card-body">
<h5 class="card-title">
<span class="bi bi-card-image cardicon" style="vertical-align: middle"></span>
<span class="card-tittle-font" style="margin-left:10px">
Imagens
</span>
</h5>
<div class="left">
<p class="card-text card-info">FORMAT </br>
<a style="color: black;">JPEG, JPG, PNG...</a>
</div>
<div class="left">
<p class="card-text card-info ">Details</br>
<a style="color: black;">None</a>
</div>
<button type="button" class="buttonsCards btn btn-success right" style="color: #0B8149;">Selecionar</button>
</div>
</div>
</div>
<div class="col-4 mb-3 ">
<div class="card">
<div class="card-body">
<h5 class="card-title">
<span class="bi bi-card-image cardicon" style="vertical-align: middle"></span>
<span class="card-tittle-font" style="margin-left:10px">
Imagens
</span>
</h5>
<div class="left">
<p class="card-text card-info">FORMAT</br>
<a style="color: black;">JPEG, JPG, PNG...</p></a>
</div>
<div class="left">
<p class="card-text card-info ">DETAILS</br>
<a style="color: black;">None</a>
</div>
<button type="button" class="buttonsCards btn btn-success right" style="color: #0B8149;">Selecionar</button>
</div>
</div>
</div>
</div>
<div class=col-1></div>
</div>
</div>
</body>【问题讨论】：
你在使用 Bootstrap 吗？ 是的，我在 Visual Code Studio 中使用 bootstrap puglin（基于文档的 Bootstrap 4 sn-ps + Font Awesome 4 + Font Awesome 5 Free & Pro sn-ps） 【参考方案1】：好的。可能有几种方法可以做到这一点。 但我想说的是，这是实现这一目标的最简单或最简单的方法。它也可以与 2 张以上的卡一起使用 - 如果您愿意，可以使用 100 张。或更多。
1. 首先，我们需要监听用户何时点击其中一个按钮。当我们意识到一个按钮被点击时，我们想要重置 .然后我们想将您的特定样式添加到包含被点击按钮的卡片中。
你会这样做：
const cards = document.querySelectorAll("div.card");
// returns a Nodelist Object of every card
const buttons = document.querySelectorAll("div.card button");
// returns a Nodelist Object of every button in a card
function resetCards()
// loops through each card
cards.forEach(card =>
// Makes the card and the button go to original look
// Change this to your own default colour for the card and button
card.style.backgroundColor = "white";
card.querySelector("button").style.backgroundColor = "white";
// Change button's text back to Selecionar (default)
card.querySelector("button").innerText = "Selecionar";
// Change button's text colour back to black (default)
card.querySelector("button").style.color = "black";
);
// Loops through every card
cards.forEach(card =>
/*
Attaches an event listener to every button
In simple language, it does something when you click a button
*/
card.querySelector("button").addEventListener("click", e =>
// When you click a button, the following code is executed
// First it invokes (calls) the resetCards function - this will make all the cards go back to normal
resetCards();
// Makes the card which contains the button you clicked become blue
// --- Change this to your own colour to add to the card when you clicked its button
card.style.backgroundColor = "blue";
// e.target tells you what you clicked.
// In this case, you are always clicking the button so e.target returns the button you clicked
// Makes the button you clicked have a lightblue background
// --- Change this to your own colour for your button when you clicked
e.target.style.backgroundColor = "lightblue";
// Replace [something else] with the text you want for the button when it is clicked
e.target.innerText = "something else";
// Change the text colour for the button to the colour *you* want to use
e.target.style.color = "red";
);
);
这是方法1。
说明 首先，我们创建一个名为cards 的变量来包含所有卡片的列表。 我们对卡片中的所有按钮执行相同操作。
接下来，我们检查每张卡片并告诉程序在用户单击其中一个按钮时进行监听。发生这种情况时，我们通过调用 resetCards() 函数将每张卡片（及其按钮）重置为其默认颜色。最后，我们为包含我们单击的按钮的卡片添加特定的背景颜色。然后，我们为单击的按钮添加另一种颜色。而已。然后，当您单击另一张卡片时，程序将再次重置所有卡片，然后将特定颜色添加到您刚刚单击的卡片和按钮。
希望这可以帮助您实现您想要实现的目标。这是我的第一个答案，所以这样做很有趣。祝你有美好的一天。
【讨论】：
非常感谢！它工作得很好，你的解释真的很有帮助和详细。它肯定会对我未来的项目有所帮助！ c; 很高兴听到这个消息！以上是关于如何在卡片内的按钮上进行 onclick 事件：更改卡片背景颜色、按钮背景和文本颜色以及文本内容的主要内容，如果未能解决你的问题，请参考以下文章
在ReactJS中使用迭代时如何将onClick事件传递给父组件？