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

下面是我的代码，我试图隐藏和显示动态元素。我遇到的问题是，我只希望我的隐藏div一次只显示一个，只要我选中“Other”。但是，下面的代码将显示所有数量的

#dynamicRows

的隐藏div。因此它适用于添加的第一个

#dynamicRow

，问题是当我有两个或更多

#dynamicRow

$('#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#中得到了很好的处理

动态行1使用上述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>

不：
其他：
当选中其他单选按钮时，我一次出现一个

动态行2不适用于上述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>

不：
其他：
当选中其他单选按钮时，我一次出现一个

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:

然后在js中使用此类：

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

希望这有帮助。

试试这个：

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

---

他是你想要的一个成功的例子。我仅使用js生成所需的

有几点值得一提

将事件侦听器添加到动态生成内容的父级

如果ID不是唯一的，请避免使用ID，如果需要，请选择类和伪选择器

var计数器=0；
函数addNewEntry（）{
++计数器；
var str='否：其他：当选中其他单选按钮时，我一次显示一个'；
$（'#dynamicRowContainer'）。追加（str）；
$（“#dynamicRowContainer.dynamicRow:last child.cssclass”）.hide（）
}
$（'#dynamicRowContainer'）。on（'change'，'.dynamicRow>input'，函数（）{
if（this.value==“其他”）{
$（this.sides（'.cssclass'）.show（）；
}否则{
$（this.sides（'.cssclass'）.hide（）；
}
});

添加新条目
如果要将ID分配给超过1个元素的使用类，则IDS应该是唯一的。您必须考虑.Eh（）的用户。我希望这篇文章能帮助你：举个例子。还要避免使用id，尽量使用html标记识别元素。@Chris我无法分配id，因为html是动态表单，它是在c#中生成的。这就是为什么我有一个类调用cssclassBind，而不是id。我相信这会解决您的问题。@Chris id“dynamicCrow”我使用的是ajax如何附加我的动态行，而不是正文。我发布的jquery工作，它是foreach循环。我需要根据我目前所在的索引显示和隐藏。你所说的工作是什么意思？在所有行中使用相同的
id
会生成无效的HTML代码，并且可能会生成错误。我的意思是，它可以工作，因为当初始行为1时，jquery事件会被触发，即使当行为2时也是如此。顺便说一句，我有class=race，这也没用。基本上，如果我有5行动态div，并且我选中了“other”单选按钮，那么表单的其余部分都会显示隐藏的div。我不工作，这就像我原来的问题一样。你看到了吗？当我点击一个与“其他”不在同一行的事件“否”时，div是如何消失的吗？伙计，你的答案太接近了。因此，当我在一行中，单击“否”时，我应该什么也看不到，在同一行中，如果我单击“其他”，我应该会看到div，现在如果我转到下一行，同样的过程会发生。目前，在您的回答中，当我单击“其他”然后更改为“否”时，div仍然保持不变。我刚刚看到您是如何生成表单的，当然这会起作用，但我正在使用C#生成表单字段集合，这些变量已经由系统提供，我需要使用我发布的内容。如果我是使用js添加的，那么它会工作，不过，情况并非如此，谢谢。
$('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();
        });
    }
});