Question

我正在尝试为网页创建一系列按钮，这些按钮的功能类似于切换按钮（活动/非活动），并且会根据当前选择的按钮组合来更改iframe的来源。因此，例如，如果我希望有人可视化出现的产品：

三种颜色（红色，绿色，蓝色）

三种材料类型（金属，塑料，玻璃）

三种尺寸（小，中，大）

我碰巧在每个选项上都有一个单独的网页，我希望根据当前的选择（在这种情况下有27种可能的组合）显示，我将如何去做？对不起，我对此并不是很有经验，但我正在努力学习。

//Would I set the initial variables like this?
var Red = true;
var Blue = false;
var Green = false;
var Metal = true;
var Plastic = false;
var Glass = false;
var Small = true;
var Medium = false;
var Large = false;
...

//Then set the initial state of each button? (Sorry, not sure what this would look like.)
btnRed.active;
btnMetal.active;
btnSmall.active;
...

//Then make a conditional statement to make sure two variables and two button states cannot be true at the same time within each of the three categories? (Again, sorry not sure what some of this code would look like.)
if (btnRed.active){
  Red = true;
  Blue = false;
  Green = false;
  btnBlue.active = false;
  btnGreen.active = false;
} else if (btnBlue.active){
  Red = false;
  Blue = true;
  Green = false;
  btnRed.active = false;
  btnGreen.active = false;
} else if (btnGreen.active){
  Red = false;
  Blue = false;
  Green = true;
  btnBlue.active = false;
  btnRed.active = false;
}
...

//Then set the iframe source based on the variable combination?
if (Red = true && Metal = true && Small = true){
  document.getElementById('myIframe').src = "http://somesite.com";
}
...

感谢任何帮助。谢谢！

Answer 1

我假设您正在使用单选按钮。

<script>
function showContent(obj, content, text)
obj.className += " active";
</script>

以下是完整的工作代码：Working Code

如何使用Javascript更改基于按钮状态的iframe源

1 个答案: