切换DIV内容的按钮

Question

我为定价表创建了一些需要能够在英镑和美元之间转换的东西，我有一个基础，有一个滑动机制，不幸的是你能够点击＆＃ 34;斯特林＆＃34;不止一次产生它在两种价格之间转换的功能，我想知道如何才能使它只能执行一次功能，以摆脱这个问题

＆＃13;

＆＃13;

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';
  }
};

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

任何帮助将不胜感激！

Answer 1

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

＆＃13;

＆＃13;

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";
  }
};

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将swap函数设置为单选按钮的change事件的回调，因此只有在交换机状态发生变化时才会调用它。

另一方面，给你的单选按钮更有意义的名字是个好主意。 "week"和"month"似乎在这里没有多大意义。 ;-)而且，您使用id="swap"两次，但ID必须是唯一的。

＆＃13;

＆＃13;

document.getElementById('currency_sterling').addEventListener('change', swap);
document.getElementById('currency_dollars').addEventListener('change', swap);

function swap(ev) {
  if (ev.target.value === '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";
  }
};

＆＃13;

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;
}

＆＃13;

<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="currency" value="sterling" id="currency_sterling" checked>
  <label for="currency_sterling" class="switch-label switch-label-off">Sterling</label>
  <input type="radio" class="switch-input" name="currency" value="dollars" id="currency_dollars">
  <label for="currency_dollars" class="switch-label switch-label-on">Dollars</label>
  <span class="switch-selection"></span>
</div>

＆＃13;

＆＃13;

＆＃13;