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

我有这些单选按钮：

<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的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();
  });
});

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

这里有一种快速而肮脏的方法来实现

$("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>

这个片段不想在stackoverflow上工作，但它在代码笔中

此解决方案操作页面的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会被修改。

我采用了一种不同的方法，创建了一个快速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列表中，以便稍后返回。

选择产品（）

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

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

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

相关内容

最新更新

热门标签：