javascript - 如何让 "onclick"内容显示在动态创建的内容旁边

Question

我有一个动态创建的列表，旁边显示单选按钮。更改单选按钮后，我希望下拉列表出现在动态创建的列表和已更改的单选按钮旁边。基本上，如果我将按钮更改为是(可见)，我希望在它旁边出现一个下拉列表......因此取决于我的列表中有多少项目以及哪些项目设置为是，将是似乎设置位置的下拉列表(每个动态创建的下拉列表中有 8 个相同的固定选项)。

到目前为止，我所做的就是创建一个 onchange jQuery 中的事件并“取消隐藏”预制下拉列表 - 代码工作正常，但它不是所需要的。我将在下面发布代码和图片:

//K's function:
        function get_all_pages() {
        global $connection;
        $query = "SELECT * 
                FROM pages ";
        $query .= "WHERE visible = 1 ";
        $query .= "ORDER BY position ASC";
        $page_set = mysql_query($query, $connection);
        confirm_query($page_set);
        return $page_set;
    }
//K's function:
function list_all_pages(){
$output = "<ul>";
$page_set = get_all_pages();
while ($page = mysql_fetch_array($page_set)) {
$output .= "<li><a href=\"add_feature.php?page=" . urlencode($page["id"]) . "\">{$page["menu_name"]}</a></li>";
$output .= "&nbsp;&nbsp;<input type=\"radio\" class=\"unchecked\" onclick=\"uncheck()\" name=\"visible_{$page["id"]} \" value=\"0\" checked=\"checked\" /> No <input type=\"radio\" class=\"checked\" onclick=\"check()\" name=\"visible_{$page["id"]} \"value=\"1\" /> Yes";
    }
$output .= "</ul>";
return $output;
}   
---------- jquery
<script type="text/javascript">
 $(document).ready(function() {
//alert("document ready");
   $('#position').hide();


 });

$('.checked').change(function() {
     $('#position').show();
});
$('.unchecked').change(function() {
     $('#position').hide();
});
</script>

--------- html (not what is wanted but the only thing I've got going right now....

<form>
<?php echo list_all_pages(); ?>

<div id="position">

<select name="position">
var count;
for (count=1; count <= 8; count++) {
<option value='count'>count</option>;
        }
</select>

</div>

</form>  

截至 8 月 27 日的新信息:
由于 redrazor11 在 jfiddle 中的帮助，它是半工作的...... JavaScript onchange在 PHP 循环中工作但仅适用于第一个 <li> ... 事实上，当我点击另一个 <li> 时单选按钮下拉菜单有时会出现在第一个 <li> 下再次...代码和新图片发布在下面:

    //K's function:
    function list_all_pages(){
    $output = "<ul>";
    $page_set = get_all_pages();
    while ($page = mysql_fetch_array($page_set)) {
    $output .= "<li><a href=\"add_feature.php?page=" . urlencode($page["id"]) . "\">{$page["menu_name"]}</a></li>";
    
    
    
    $output .= "&nbsp;&nbsp;<input onchange=\"javascript:document.getElementById(1).style.display = 'block';\" type=\"radio\" name=\"visible_{$page["id"]} \" value=\"0\" checked=\"checked\" /> No <input onchange=\"javascript:document.getElementById(1).style.display = 'none';\" type=\"radio\" name=\"visible_{$page["id"]} \"value=\"1\" /> Yes";
    
    $output .= "<div id='1' style='display: none'><select name='position'><option value='count'>1</option><option value='count'>2</option><option value='count'>3</option></select></div>";
    
    
    
        }
    $output .= "</ul>";
    return $output;
    }   

9 月 2 日编辑:
我尝试将 $counter 作为 ID，然后尝试使用 $page[id]并且两者都返回了使 div 显示在每个 li 中的结果......但是 onclick 似乎有问题JavaScript 工作正常...如果 redrazor11 或其他人可以查看并且可能弄清楚 onclick 上发生的这种奇怪行为，我将发布链接？链接:

http://www.firetreegraphics.com/widget_corp-final/add_feature.php

这是最近更改的代码:

//K's function:
function list_all_pages(){
$output = "<ul>";
//$output .= $counter = 0;
$page_set = get_all_pages();
while ($page = mysql_fetch_array($page_set)) {
$output .= "<li><a href=\"add_feature.php?page=" . urlencode($page["id"]) . "\">{$page["menu_name"]}</a></li>";

$output .= "&nbsp;&nbsp;<div id=\"$page[id]\" style='display: none'><select name='position'><option value='count'>1</option><option value='count'>2</option><option value='count'>3</option></select></div>";

$output .= "&nbsp;&nbsp;<input onchange=\"javascript:document.getElementById('$page[id]').style.display = 'block';\" type=\"radio\" name=\"visible_{$page["id"]} \" value=\"0\" checked=\"checked\" /> No <input onchange=\"javascript:document.getElementById('$page[id]').style.display = 'none';\" type=\"radio\" name=\"visible_{$page["id"]} \"value=\"1\" /> Yes";

//$output .= $counter = $counter+1;

    }
$output .= "</ul>";
return $output;
}   

Answer 1

请参阅我在较早的堆栈交换帖子中找到的这个 fiddle 。

想法是用选择框隐藏 div，直到您准备好显示/填充它。根据所选内容，您可以使用不同的 id'd div。在此示例中，它是导致内容显示的下拉菜单，但它与单选按钮的想法类似。

http://jsfiddle.net/cpradio/YvN4Q/