时间戳

首页 > 解决方案 > if 语句在单击按钮时检查活动类

javascript - if 语句在单击按钮时检查活动类

问题描述

试图在 JS 中创建一个 if 语句，当前 3 个按钮之一发生变化时，它会检查底部 2 中的哪一个具有“活动”类，反之亦然。

因此，当我单击 30g 时，它会检查选项 a 或选项 b 是否处于活动状态，然后相应地更改价格。

任何帮助将不胜感激，因为我是一个菜鸟。

问题是有两排按钮（一排选择重量，一排选择选项a或b）。我知道它是如何工作的，我只是不知道语法，这就是我想要发生的事情，但它的编码不正确。

//this is shitty code of what I mean, but I don't know how to code in JS
 if(button30g.isclicked && buttonOptionA.ContainsClass.Active) 
    { Price=1.00; } 
    else if(button30g.isClicked && buttonOptionB.ContainsClass.Active) 
    { Price=2.00; } 
    if(button70g.isclicked && buttonOptionA.ContainsClass.Active) 
    { Price=3.50; } 
    else if(button70g.isClicked && buttonOptionB.ContainsClass.Active) 
    { Price=4.00; } 
    if(button70g.isclicked && buttonOptionA.ContainsClass.Active) 
    { Price=3.50; } 
    else if(button70g.isClicked && buttonOptionB.ContainsClass.Active) 
    { Price=4.00; }


<!DOCTYPE html>
<html lang="en">
<head>
<style>
ul.nav a{
border: 2px solid #E1E8EE;
border-radius: 6px;
padding: 13px 20px;
font-size: 14px;
color: #5E6977;
background-color: #fff;
cursor: pointer;
transition: all .5s;
display: inline-block;
vertical-align: middle;
}
.activeBtn { color:grey; font-weight:1000; border: 2px solid grey; border-radius: 6px; }
</style>
</head>
<body>
<ul class="nav">
<li id="30" data-price="bird" onclick="myFunction()"  class="activeBtn"><a>30g</a></li>
<li id="70" onclick="myFunction()"><a>70g</a></li>
<li id="90" onclick="myFunction()"><a>90g</a></li>
</ul>
<ul class="nav">
<li id="no" class="activeBtn"><a>option a</a></li>
<li id="yes"><a>option b</a></li>
</ul>
<br>
<div class="product-price">
<span id="price">148$</span>
</div>
</body>
<footer>
<script>
$(function() {
$( 'ul.nav li' ).on( 'click', function() {
$( this ).parent().find( 'li.activeBtn' ).removeClass( 'activeBtn' );
$( this ).addClass( 'activeBtn' );
});
});
</script>
<script>
function myFunction() {
const element = document.getElementById("30");
const element2 = document.getElementById("no");
const pricetag = document.getElementById("price");
if(((element.classList.contains("activeBtn"))==true)&&((element2.classList.contains("activeBtn"))==true))
{
pricetag.innerHTML = €1,00;
}
</script>
</footer>
</html>

标签： javascripthtml

解决方案

你想要的工作我已经单独完成了，所以检查一下。此代码根据“是”或“否”选项工作并显示价格。

<!DOCTYPE html>
<html lang="en">
<head>
<style>
    .radioStyle{
        border-color: blue;
        border-width: thin;
        border-style: solid;
        width: 50%;
        
    }
    
    </style>
</head>
<body>
  <div><input  type="radio" name="grams" value="30" id = "30" onclick="myFunction()"> 30g</div>
    
    <div><input type="radio" name="grams" value="70" id = "70" onclick="myFunction()"> 70g</div>
    
    <div><input type="radio" name="grams" value="90" id = "90" onclick="myFunction()"> 90g </div>
    
    
    <hr>
    
    <input type="radio" name="option" value="yes" id ="yes" checked onclick="myFunction()"> yes<br>
  <input type="radio" name="option" value="no" id = "no" onclick="myFunction()"> no<br>
    <br>
    <span id = "sp">
      0$
    </span>
  
   

</body>
<footer>
    <script>
        
        function setBorder(){
           var siblings = document.querySelectorAll('input[name = "grams"]');
            siblings.forEach(element => element.parentElement.className="");
             var grams = document.querySelector('input[name = "grams"]:checked');
            grams.parentElement.className = "radioStyle";
            console.log(siblings);
             console.log(grams);
        }
        
        
    function myFunction(){
        setBorder();
        var grams = document.querySelector('input[name = "grams"]:checked').value;
        var option =   document.querySelector('input[name = "option"]:checked').value;
       
        var rate = 0;
        if (option == "yes"){
            if (grams == "30")
                rate = 1.5;
            else if (grams == "70")
                rate = 2.5;
            else if (grams == "90")
                rate = 3.5;
        }
        else if (option == "no"){
            if (grams == "30")
                rate = 2;
            else if (grams == "70")
                rate = 3;
            else if (grams == "90")
                rate = 4;
        }
                                
        document.getElementById("sp").innerHTML = rate*grams+"$";
      
 }
    </script>
</footer>
</html>

推荐阅读