如何使用 Javascript 根据按钮状态更改 iframe 源

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

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

$('input[type="radio"]').on("change", setIframe);

var setIframe = function() {
  var url;
  //computation of url
  $('iframe').attr("src", url);
}

这是完整的工作代码：Working Code