Question

我已經嘗試了幾天的JavaScript，但我很窮。我的代碼是從數據庫中獲取數據（假設有4條記錄）。只有第一個循環，當我改變單選按鈕。下面是我的代碼：

PHP代碼

while($row = mysql_fetch_array($sql)){ 
echo "<div class='loop'>"; 

    echo "<p><input type='checkbox' name='content_type' value='1' /></p>"; 
    echo "<p><input type='checkbox' name='content_type' value='2' /></p>"; 
    echo "<p><input type='checkbox' name='content_type' value='3' /></p>"; 

    //content_a 
    echo "<div id='content_a' style='display:none;'>"; 
     echo "<textarea name='text' id='textarea0'><textarea>"; 
    echo "</div>"; 

    //content_b 
    echo "<div id='content_b' style='display:none;'>"; 
     echo "<textarea name='text' id='textarea1'><textarea>"; 
    echo "</div>"; 

    //content_c 
    echo "<div id='content_c' style='display:none;'>"; 
     echo "<textarea name='text' id='textarea2'><textarea>"; 
    echo "</div>"; 

    //button 
    echo "<div class='button'>"; 
     echo "<a class="tweet1" href="#" onclick="return false;">Alert</a>"; 
    echo "</div>"; 

echo "</div>"; 
} 

的Javascript

$('input[name=content_type]').bind('change', function(){ 
    var n = $(this).val(); 
    switch(n) 
    { 
    case '1': 
      $(this).parents('.loop').find('#content_a').show(1000); 
      $(this).parents('.loop').find('#content_b').hide(1000); 
      $(this).parents('.loop').find('#content_c').hide(1000); 
      break; 
    case '2': 
      $(this).parents('.loop').find('#content_b').show(1000); 
      $(this).parents('.loop').find('#content_a').hide(1000); 
      $(this).parents('.loop').find('#content_c').hide(1000); 
      break; 
    case '3': 
      $(this).parents('.loop').find('#content_c').show(1000); 
      $(this).parents('.loop').find('#content_a').hide(1000); 
      $(this).parents('.loop').find('#content_b').hide(1000); 
      break; 
    } 
}); 

我想根據從數據庫中讀取循環單選按鈕的動作變化。我的代碼如上，只有第一個循環受到影響。你能幫我解決這個問題嗎？

預先感謝

Answer 1

這是怎麼一回事，因爲ID應該永遠是唯一的 ...這裏（在你的代碼）你有相同的ID id='content_a'（因爲它是一個循環內）的多個元素。這個改變類和使用類選擇

也試試這個

HTML

echo "<div class='content_a' style='display:none;'>"; 
     //---^^^^^ here 

jQuery的

$(this).parents('.loop').find('.content_a').show(1000);\ 
         //-------^-----here 

改變所有其它ID選擇

同時parents('.loop')作品。 。我建議使用closest()作爲bett呃性能

$(this).closest('.loop').find('.content_a').show(1000); 

是的..你可以，如果你正確地chnage您的HTML降低你的代碼兩行..

第一個改變你的內容，以配合該複選框值..

echo "<div class='content_1' style='display:none;'>"; //here class='content_' + value of checkbox 
..... 
echo "<div class='content_2' style='display:none;'>"; 
... //so on 

試試這個

$('input[name=content_type]').bind('change', function(){ 
    var n = $(this).val(); 
    $('div[class^="content_"]').hide(); //hide all div 
    $(this).closest('.loop').find('.content_' + n).show(1000); //so particular div 
});