javascript - varA not selected display not selected 应该如何实现？

Question

我有一个简单的产品页面，其中包含一些尺寸和一个添加到购物车按钮。我想使用 jquery $("").toggle(); 如果未选择尺寸 onClick 添加到购物车按钮。

这是我的代码:

瑞安.js

function ryanClicked(id, b, c){
  b = b || null;
  c = c || null;
document.getElementById(id).style.borderColor = "black";
document.getElementById(b).style.borderColor = "#e0e0e0";
document.getElementById(c).style.borderColor = "#e0e0e0";
}

html.html

<div class="pp">
<div id ="sizeButton1"class="sizeButton" onclick="ryanClicked('sizeButton1','sizeButton2','sizeButton3')">      S </div>
<div id ="sizeButton2"class="sizeButton" onclick="ryanClicked('sizeButton2','sizeButton1','sizeButton3')">      M </div>
<div id ="sizeButton3"class="sizeButton" onclick="ryanClicked('sizeButton3','sizeButton1','sizeButton2')">      L </div>
</div>          <br>
//I want to prevent the onClick from happening if size is not selected
<p class="ryanAddButton" onclick="simpleCart.add('quantity=1','name=Black Gold','price=58','image=images/thumbs/blackGold.jpg');return false;" >Add to Cart</p>

<p class ="hiddenTilClicked"> You must select a size! </p>

我希望在选择尺寸时调用 onclick，如果未选择尺寸，我希望调用 jquery 切换。

我该怎么做？我只能使用js if 语句，但我不知道如何使用JS 来显示html。

编辑:我可以传入一个在js中调用的函数吗？那是回调吗？ simplecart.add() 将为每个项目设置不同的参数

Answer 1

1. 您需要在边框上设置样式和宽度。
2. 使用变量跟踪是否选择了样式。
3. b = b ||不需要 null 因为你总是传入一个参数

var sizeSelected = false;

function ryanClicked(id, b, c) {
  sizeSelected = true;
  document.getElementById(id).style.border = "1px solid black";
  document.getElementById(b).style.border = "1px solid #e0e0e0";
  document.getElementById(c).style.border = "1px solid #e0e0e0";
}

function addClicked() {
  if (sizeSelected) {
    document.getElementById('hiddenTilClicked').style.display = 'none';
    simpleCart.add('quantity=1', 'name=Black Gold', 'price=58', 'image=images/thumbs/blackGold.jpg');

  } else {
    document.getElementById('hiddenTilClicked').style.display = 'block';
  }
}

.hiddenTilClicked {
  display: none;
}

<div class="pp">
  <div id="sizeButton1" class="sizeButton" onclick="ryanClicked('sizeButton1','sizeButton2','sizeButton3')">S</div>
  <div id="sizeButton2" class="sizeButton" onclick="ryanClicked('sizeButton2','sizeButton1','sizeButton3')">M</div>
  <div id="sizeButton3" class="sizeButton" onclick="ryanClicked('sizeButton3','sizeButton1','sizeButton2')">L</div>
</div>
<br>
<p class="ryanAddButton" onclick="addClicked();">Add to Cart</p>

<p id="hiddenTilClicked" class="hiddenTilClicked">You must select a size!</p>