如何使用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);
}

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