從動態元素jQuery c顯示隱藏文本框＃

Question

下面是我的代碼，我試圖隱藏和顯示動態元素。我遇到的問題是，如果只檢查「其他」，我只希望隱藏的div只顯示一個。但是，下面的代碼將顯示我擁有的所有#dynamicRows的隱藏div。所以它適用於初次加1 #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的工作，它需要上述形式的活動作爲自己的，所以如果我檢查的單選按鈕第2行，第1行的動態響應該事件，反之亦然：

<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的，如果他們都不會是唯一的，如果需要的話

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>

喜歡類和僞選擇