显示不同的动态 div 标签取决于单选按钮选择答案

【问题标题】：showing different dynamic div tags depend on the radio button selection显示不同的动态 div 标签取决于单选按钮选择
【发布时间】：2016-03-14 01:06:47
【问题描述】：

我有这些单选按钮：

<input name="selector" value="1" type="radio" id="1" />
<input name="selector" value="2" type="radio" id="2" />

然后，我想根据所选单选按钮显示正确的动态<div>。

这是<div> 标签：

<div id="product_{selector#ID}">                                                                                            
...
</div>

如您所见，<div> 的 ID 应该是动态的。可以用javascript处理吗？

【问题讨论】：

div 的动态究竟是什么？您是在生成其他内容还是页面上已有内容？
您想根据所选电台显示不同的 div 吗？您可以更改可见性 CSS 属性还是要使用 DOM 创建？
@BuddhistBeast div的ID是动态的，在这种情况下内容不重要。
@caballerog 由于某些情况我无法创建两个 div，它应该只有一个！
@Snowleaf 我只是回答你的问题。

标签： javascript html button radio

【解决方案1】：

如果div 的id 是动态的，则对:radio 也应用相同的原则：

<input name="selector" value="1" type="radio" id="r_{selector#ID}" />
<input name="selector" value="2" type="radio" id="r_{selector#ID}" />

对于 jQuery：

$(function () {
  $("input:radio[name='selector']").click(function () {
    $("#" + this.id.replace("r", "product")).show();
  });
});

您可以使用此逻辑来完成其余的工作。

【讨论】：

【解决方案2】：

这是实现您所追求的快速而肮脏的方法

$("input:radio[name='selector']").click(function() {
  var rdId = $(this).val();
  $("div").hide();
  $("#product_" + rdId).show();
});

div { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="selector" value="1" type="radio" name="radio" id="1" /> 1
<input name="selector" value="2" type="radio" name="radio" id="2" /> 2

<div id="product_1">                                                                                            
..... 1
</div>

<div id="product_2">                                                                                            
..... 2
</div>

sn-p 不想在 stackoverflow 上工作，但 here it is in codepen

【讨论】：

不幸的是，我无法在 html 代码中创建两个 div。它只能是一个动态标签。
这只是为了演示目的。你可以保留你的动态标签，只要它在单选按钮上附加一个匹配的值，你就可以了。

【解决方案3】：

此解决方案会操作您页面的 DOM。

你的 html 是

<body>
 <input name="selector" value="1" type="radio" id="1" />
 <input name="selector" value="2" type="radio" id="2" />

 <div id="main">
   <div id="product_{selector#ID}"></div>
 </div>

你的 JS

function createDiv(id) {
 var myDiv = document.createElement('div');
 myDiv.setAttribute('id', 'product_' + id);
 document.getElementById('main').appendChild(myDiv);
}

function removeDiv() {
 var element = document.getElementById("main");
 while (element.firstChild) {
  element.removeChild(element.firstChild);
 }
}
var radio1 = document.getElementById('1');
var radio2 = document.getElementById('2');
radio1.onclick = function(e) {
 removeDiv();
 createDiv(this.id)
};
radio2.onclick = function(e) {
 removeDiv();
 createDiv(this.id)
};

现在您可以在元素检查器中看到，如果您选择不同的选项，则 DOM 会被修改。

【讨论】：

【解决方案4】：

我采用了一些不同的方法，创建了一个快速的 JsFiddle 来演示如何使用 JavaScript 动态处理这些事件。以下是我的例子中重要的部分：

JavaScript

//Initialize variables;
var elements, current, last;

//Initially creates the event listeners
elements = document.getElementsByClassName('product_selection');

for (var i = 0; i < elements.length; i++) 
  elements[i].onclick = selectProduct;

//Sets the correct div to be displayed
function selectProduct() {
  current = String(this.id);

  var el = document.getElementById("product_" + current);
  el.style.display = "block";

  if (last !== undefined)
    document.getElementById("product_" + last).style.display = "none";

  last = String(this.id);
}

加载

根据页面上当前已有的内容，我们将事件侦听器设置为单选按钮被单击时。然后我们将该元素 id 附加到一个 id 列表中，以便我们稍后可以返回到它。

selectProduct()

将单击的单选按钮设置为当前项目，然后我们要确保它显示出来。完成后，假设这不是第一个单击的单选按钮，我们将隐藏之前显示的 div 并将最后一项更新为当前单击的单选按钮。

我的示例的其余部分仅允许您查看创建动态创建的单选按钮/div 时会发生什么以及程序如何处理该 DOM 操作。

http://jsfiddle.net/ejk4z03k/5/

【讨论】：