Question

这些是卡片，我写了JavaScript来选择按钮并将其变成活动类，但是当我选择按钮时，它没有被选择并且没有变成活动按钮，这是错误的

在样式标签中，我写了当鼠标悬停或处于活动状态时要做的所有事情

这是JavaScript

<script>
// Add active class to the current button (highlight it)
var header = document.getElementById("price");
var head = header.getElementsByClassName("card");
var btns = head.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
  var current = document.getElementsByClassName("active");
  if (current.length > 0) { 
    current[0].className = current[0].className.replace(" active", "");
  }
  this.className += " active";
  });
}
</script>

.card .card-body a{
  margin-bottom: 2.5rem;
  border: solid yellow;
  border-top-width: initial!important;
  color: white;
  background-color: transparent;
  font-size: 1.3rem;
  min-width:13rem;
} 
  


.card .card-body a:hover{
  color: #d6c926;
  {% comment %} border: none; {% endcomment %}
  {% comment %} border-bottom: solid blue; {% endcomment %}
  background-color: #191818cf;
  font-family:cursive;
  text-decoration: none;
  {% comment %} animation: border-line 3s ease forwards;  {% endcomment %}
} 
  


.card .card-body a:active,
.card .card-body a.active{
  background-color: #d6c926!important;
  color: black!important;
  border: black!important;
  font-family: cursive;
}

<div class="form-row" id="price">
                <div class="card border-warning mb-3" style="max-width: 18rem;">
                    <div class="card-header"><strong>1 Mounth</strong></div>
                    <div class="card-body text-warning">
                        <h5 class="card-title">Warning card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a class="btn btn-primary active 1_mon">Select This</a>
                    </div>
                </div>

                <div class="card border-warning mb-3" style="max-width: 18rem;">
                    <div class="card-header"><strong>6 Mounth</strong></div>
                    <div class="card-body text-warning">
                        <h5 class="card-title">Warning card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a class="btn btn-primary 6_mon">Select This</a>
                    </div>
                </div>

            
                <div class="card border-warning mb-3" style="max-width: 18rem;">
                    <div class="card-header"><strong>10 Mounth</strong></div>
                    <div class="card-body text-warning">
                        <h5 class="card-title">Warning card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a  class="btn btn-primary 10_mon">Select This</a>
                    </div>
                </div>
            </div>

在此之后，我必须获取按钮的值并将其存储到隐藏的输入标签中

Answer 1

尝试：-

<script>
var btns = document.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
  var current = document.getElementsByClassName("active");
  if (current.length > 0){ 
    current[0].className = current[0].className.replace(" active", "");
  }
  this.className += " active";
  });
}
</script>

选择按钮活动类别

1 个答案: