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

Question

下面是我的代码，我试图隐藏和显示动态元素。我遇到的问题是，如果我只检查“其他”，我只希望我的隐藏 div 一次只显示一个。但是，下面的代码将显示我拥有的所有 #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 代码，但是，它在屏幕上不存在，用户将单击“添加”以生成下面的代码。我在生成动态行方面没有问题，这不是我发布的原因。请注意，我的单选按钮中的名称是由 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，它把上面的表单事件作为自己的，所以如果我检查第二行中的单选按钮，第一个动态行会响应该事件，反之亦然：

<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 生成所需的。

有几点要提

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

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

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