javascript - 切换DIV内容的按钮

Question

我正在为需要能够在英镑和美元之间进行转换的定价表创建一些东西，我有这个基础，有一个滑动机制，不幸的是你可以不止一次点击“英镑”产生它在两种价格之间转换的功能，我想知道我怎样才能让它只能执行一次功能，以解决这个问题

var shown = 'sterling';

function swap() {
  if (shown === 'sterling') {
    document.getElementById('dollars-1').style.display = "inline-block";
    document.getElementById('dollars-2').style.display = "inline-block";
    document.getElementById('dollars-3').style.display = "inline-block";
    document.getElementById('sterling-1').style.display = "none";
    document.getElementById('sterling-2').style.display = "none";
    document.getElementById('sterling-3').style.display = "none";
    shown = 'dollars';
  } else {
    document.getElementById('sterling-1').style.display = "inline-block";
    document.getElementById('sterling-2').style.display = "inline-block";
    document.getElementById('sterling-3').style.display = "inline-block";
    document.getElementById('dollars-1').style.display = "none";
    document.getElementById('dollars-2').style.display = "none";
    document.getElementById('dollars-3').style.display = "none";
    shown = 'sterling';
  }
};

body {
  background-color: #707070;
}

.switch {
  position: relative;
  height: 26px;
  width: 120px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}

.switch-label {
  position: relative;
  z-index: 2;
  float: left;
  width: 58px;
  line-height: 26px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.switch-label:active {
  font-weight: bold;
}

.switch-label-off {
  padding-left: 2px;
}

.switch-label-on {
  padding-right: 2px;
}


/*
 * Note: using adjacent or general sibling selectors combined with
 *       pseudo classes doesn't work in Safari 5.0 and Chrome 12.
 *       See this article for more info and a potential fix:
 *       http://css-tricks.com/webkit-sibling-bug/
 */

.switch-input {
  display: none;
}

.switch-input:checked+.switch-label {
  font-weight: bold;
  color: rgba(0, 0, 0, 0.65);
  text-shadow: 0 1px rgba(255, 255, 255, 0.25);
  -webkit-transition: 0.15s ease-out;
  -moz-transition: 0.15s ease-out;
  -o-transition: 0.15s ease-out;
  transition: 0.15s ease-out;
}

.switch-input:checked+.switch-label-on~.switch-selection {
  left: 60px;
  /* Note: left: 50% doesn't transition in WebKit */
}

.switch-selection {
  display: block;
  position: absolute;
  z-index: 1;
  top: 2px;
  left: 2px;
  width: 58px;
  height: 22px;
  background: #65bd63;
  border-radius: 3px;
  background-image: -webkit-linear-gradient(top, #9dd993, #65bd63);
  background-image: -moz-linear-gradient(top, #9dd993, #65bd63);
  background-image: -o-linear-gradient(top, #9dd993, #65bd63);
  background-image: linear-gradient(to bottom, #9dd993, #65bd63);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  -webkit-transition: left 0.15s ease-out;
  -moz-transition: left 0.15s ease-out;
  -o-transition: left 0.15s ease-out;
  transition: left 0.15s ease-out;
}

<button id="sterling-1">£100.00</button>
<button id="sterling-2">£100.00</button>
<button id="sterling-3">£100.00</button>
<button id="dollars-1" style="display:none">$131.00</button>
<button id="dollars-2" style="display:none">$131.00</button>
<button id="dollars-3" style="display:none">$131.00</button>
<br/>
<br/>

<div class="switch">
  <input type="radio" class="switch-input" name="view" value="week" id="week" checked>
  <label for="week" class="switch-label switch-label-off" id="swap" onclick="swap()">Sterling</label>
  <input type="radio" class="switch-input" name="view" value="month" id="month">
  <label for="month" class="switch-label switch-label-on" id="swap" onclick="swap()">Dollars</label>
  <span class="switch-selection"></span>
</div>

如有任何帮助，我们将不胜感激!

Answer 1

与其保留每次单击任一选项时手动交换的变量中显示的内容，不如将价格类型传递给交换函数，然后显示您想要基于它的内容。这样，他们可以任意多次单击任一按钮，但只有在单击另一个选项时才会更改。我对您的示例进行了更改。

function swap(priceType) {
  if (priceType === 'dollars') {
    document.getElementById('dollars-1').style.display = "inline-block";
    document.getElementById('dollars-2').style.display = "inline-block";
    document.getElementById('dollars-3').style.display = "inline-block";
    document.getElementById('sterling-1').style.display = "none";
    document.getElementById('sterling-2').style.display = "none";
    document.getElementById('sterling-3').style.display = "none";
  } else {
    document.getElementById('sterling-1').style.display = "inline-block";
    document.getElementById('sterling-2').style.display = "inline-block";
    document.getElementById('sterling-3').style.display = "inline-block";
    document.getElementById('dollars-1').style.display = "none";
    document.getElementById('dollars-2').style.display = "none";
    document.getElementById('dollars-3').style.display = "none";
  }
};

body {
  background-color: #707070;
}

.switch {
  position: relative;
  height: 26px;
  width: 120px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}

.switch-label {
  position: relative;
  z-index: 2;
  float: left;
  width: 58px;
  line-height: 26px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.switch-label:active {
  font-weight: bold;
}

.switch-label-off {
  padding-left: 2px;
}

.switch-label-on {
  padding-right: 2px;
}


/*
 * Note: using adjacent or general sibling selectors combined with
 *       pseudo classes doesn't work in Safari 5.0 and Chrome 12.
 *       See this article for more info and a potential fix:
 *       http://css-tricks.com/webkit-sibling-bug/
 */

.switch-input {
  display: none;
}

.switch-input:checked+.switch-label {
  font-weight: bold;
  color: rgba(0, 0, 0, 0.65);
  text-shadow: 0 1px rgba(255, 255, 255, 0.25);
  -webkit-transition: 0.15s ease-out;
  -moz-transition: 0.15s ease-out;
  -o-transition: 0.15s ease-out;
  transition: 0.15s ease-out;
}

.switch-input:checked+.switch-label-on~.switch-selection {
  left: 60px;
  /* Note: left: 50% doesn't transition in WebKit */
}

.switch-selection {
  display: block;
  position: absolute;
  z-index: 1;
  top: 2px;
  left: 2px;
  width: 58px;
  height: 22px;
  background: #65bd63;
  border-radius: 3px;
  background-image: -webkit-linear-gradient(top, #9dd993, #65bd63);
  background-image: -moz-linear-gradient(top, #9dd993, #65bd63);
  background-image: -o-linear-gradient(top, #9dd993, #65bd63);
  background-image: linear-gradient(to bottom, #9dd993, #65bd63);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  -webkit-transition: left 0.15s ease-out;
  -moz-transition: left 0.15s ease-out;
  -o-transition: left 0.15s ease-out;
  transition: left 0.15s ease-out;
}

<button id="sterling-1">£100.00</button>
<button id="sterling-2">£100.00</button>
<button id="sterling-3">£100.00</button>
<button id="dollars-1" style="display:none">$131.00</button>
<button id="dollars-2" style="display:none">$131.00</button>
<button id="dollars-3" style="display:none">$131.00</button>
<br/>
<br/>

<div class="switch">
  <input type="radio" class="switch-input" name="view" value="week" id="week" checked>
  <label for="week" class="switch-label switch-label-off" id="swap" onclick="swap('sterling')">Sterling</label>
  <input type="radio" class="switch-input" name="view" value="month" id="month">
  <label for="month" class="switch-label switch-label-on" id="swap" onclick="swap('dollars')">Dollars</label>
  <span class="switch-selection"></span>
</div>