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