Question

我有这些单选按钮：

<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处理吗？

Answer 1

如果div＆＃39; 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();
  });
});

您可以使用此逻辑来完成剩下的工作。

Answer 2

这是实现

之后的快速而肮脏的方式

＆＃13;

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

＆＃13;

div { display: none; }

＆＃13;

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

＆＃13;

该代码段并不想处理stackoverflow，但是here it is in codepen

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

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

<强>的onload

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

<强> selectProduct（）

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

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

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

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

4 个答案: