我的代码是从数据库中获取数据(假设有 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>";
}
爪哇语
$('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;
}
});
我希望根据从数据库中获取的循环更改单选按钮操作。我上面的代码,只有第一个循环受到影响。如何解决这个问题?
这是因为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()
以获得更好的性能
$(this).closest('.loop').find('.content_a').show(1000);
是的..如果你正确地更改你的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
});