Question

下面是我的代码，我试图隐藏和显示动态元素。我遇到的问题是，我只希望我的隐藏div只能一次显示一个，如果我只检查＆＃34;其他＆＃34;。但是，下面的代码将显示我拥有的所有#dynamicRows的隐藏div。所以它适用于添加的初始#dynamicRow，问题是我有两个或更多#dynamicRows

$('#dynamicRow').on('click', 'input[id^=race]', function () {
    if ($(this).is(":checked")) {
        if ($(this).val() == "Other") {
            $(".cssclass").each(function (index) {                    
                $(this).closest("div").show();
            });

        }
        else {
            $(".cssclass").each(function () {
                $(this).closest("div").hide();

            });
        }
    }
});

下面是动态行，为了帮助我显示html代码，但是，它不存在于屏幕上，用户将点击＆＃34; ADD＆＃34;生成下面的代码。我在生成动态行时没有问题，这不是我发布的原因。请注意我的单选按钮中的名称是由c＃生成的，一切正常。问题不在于如何创建动态行，而是在C＃中很好地处理。

动态第一行可以使用上面的jQuery：

<div id="dynamicRow">
    <input type="radio" value="No" id="race[]" name="Person[hhhhhh].race"> No:
    <input type="radio" value="Other" id="race[]" name="Person[hhhhhh].race"> Other:

    <div id="iamhidden" class="cssclass">
        I appear one at a time, when other radio button is checked
    </div>      
</div>

动态第二行不能使用上面的jquery，它将上面的表单事件作为它自己的事件，所以如果我检查第2行中的单选按钮，第一个动态行会响应该事件，反之亦然：

<div id="dynamicRow">
    <input type="radio" value="No" id="race[]" name="Person[hhhhh].race"> No:
    <input type="radio" value="Other" id="race[]" name="Person[hhhhh].race"> Other:

    <div id="iamhidden" class="cssclass">
        I appear one at a time, when other radio button is checked
    </div>      
</div>

Answer 1

<强> Working Example

id在同一文档中应该是唯一的，用类替换重复的文件：

<input type="radio" value="No" class="race" name="Person[hhhhhh].race"> No:
<input type="radio" value="Other" class="race" name="Person[hhhhhh].race"> Other:

同时将class而不是id添加到C＃代码生成的动态行中：

<div class="dynamicRow">

然后在你的js中使用这个类：

$(".cssclass").hide();
$('.dynamicRow').on('click', '.race', function () {
    if ($(this).val() == "Other") {
      $(this).next(".cssclass").show();
    } else {
      $(this).nextAll(".cssclass").hide();
    }
});

希望这有帮助。

Answer 2

试试这个：

$('body').on('click', '#dynamicRow', function () {
    if ($(this).find('[value=Other]').is(":checked")) {
        $(".cssclass").each(function (index) {                    
            $(this).closest("div").show();
        });
    } else {
        $(".cssclass").each(function () {
            $(this).closest("div").hide();
        });
    }
});

Answer 3

他是你想要的工作榜样。我只用js生成必需的。

提及的几点

将事件侦听器添加到动态生成内容的父级。
如果ID不是唯一的，请避免使用ID，如果需要，请更喜欢类和伪选择器

＆＃13;

var counter = 0;
function addNewEntry(){
  ++counter;
  var str = '<div class="dynamicRow"><input type="radio" value="No" id="race[]" name="Person[hh'+counter+'].race"> No:<input type="radio" value="Other" id="race[]" name="Person[hh'+counter+'].race"> Other:<div id="iamhidden" class="cssclass"> I appear one at a time, when other radio button is checked</div> </div>';
  $('#dynamicRowContainer').append(str);
  $("#dynamicRowContainer .dynamicRow:last-child .cssclass").hide()
}
$('#dynamicRowContainer').on('change', '.dynamicRow > input', function () {
   if(this.value=="Other"){
       $(this).siblings('.cssclass').show();
     }else{
       $(this).siblings('.cssclass').hide();
     }
   
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="addNewEntry()">Add New Entry</button>
<div id="dynamicRowContainer">

</div>

＆＃13;

从动态元素jQuery c＃中显示隐藏文本框

3 个答案: