javascript - 为什么javascript + CSS显示设置使单选按钮消失？

Question

我有一个简单的 javascript，可以根据下拉菜单选项隐藏/显示各种 DIV - 但它会使其中一个 div 上的单选按钮消失...有人知道为什么吗？带有单选按钮的列表是程序化的，它适用于“书籍”选项，但不适用于“视频”选项。代码:

<script>
    function showstuff(boxid){
        if(boxid=="Book" || boxid=="Layers" || boxid=="3D"){
            document.getElementById("Video").style.display="none";
            document.getElementById("Book").style.display="inline";
        }else{
            document.getElementById("Video").style.display="inline";
            document.getElementById("Book").style.display="none";
        }
    }
</script>
 <select id="ARtype" name="ARtype" onChange="showstuff(this.value)">
    <option selected="selected" value="Book">Book</option>
    <option value="Video">Video</option>
    <option value="Layers">Layers</option>
    <option value="3D">3D</option>
</select>

        <div id="Video" style="display:none;">
    <dl><a href="uploadvideo.php">Upload Video</b>
            <img src="images/upload2.png" alt="Upload assets" /></a><br>

         <dt><label for="video">Video Overlay*</label></dt>     
        <!-- ###GET IMAGES FROM TRIGGERS FOLDER -->
    </dl>
        <table><tr><td>
        <?php
        foreach (glob("cmpping/videos/*.*") as $myimage){
           echo "<div style=\"float:left;border-right:1px solid black;padding-right:5px;margin-left:5px;'\"><span style=\"white-space:nowrap;padding-bottom:0px;line-height:30px;\">
                    <input name=\"URLVideo\" id=\"URLVideo\" type=\"radio\" value=\"$myimage\"/>
                    <img align=\"middle\" width=\"30\" style=\"max-height:50px;margin-left:5px;\" src=\"img/video.png\" /><br>".str_replace("cmpping/videos/","",$myimage) ."</span></div> ";
        }
        ?>
        </td></tr></table>
        <table><tr><td>
        <?php
        foreach (glob("cmpping/trigger/*.*") as $myimage){
            echo "<!--triggerimage=" . $query_result->triggerimage . "--><!--myimage=".$myimage ."-->";
            echo "<span style=\"white-space:nowrap;padding-bottom:20px;line-height:70px;\">
                    <input name=\"triggerid\" id=\"triggerid\" type=\"radio\" value=\"$myimage\"/>
                    <img align=\"middle\" width=\"50\" style=\"max-height:50px;margin-left:5px;\" src=\"$myimage\" /></span> ";
        }
        ?>
        <!--<input type="file" name="triggerid" id="triggerid" r />--> 
        </td></tr></table>
</div>
<div id="Book" style="display: inline">
        <table><tr><td>
        <?php
        foreach (glob("cmpping/trigger/*.*") as $myimage){
            echo "<!--triggerimage=" . $query_result->triggerimage . "--><!--myimage=".$myimage ."-->";
            echo "<span style=\"white-space:nowrap;padding-bottom:20px;line-height:70px;\">
                    <input name=\"triggerid\" id=\"triggerid\" type=\"radio\" value=\"$myimage\"/>
                    <img align=\"middle\" width=\"50\" style=\"max-height:50px;margin-left:5px;\" src=\"$myimage\" /></span> ";
        }
        ?>
        <!--<input type="file" name="triggerid" id="triggerid" r />--> 
        </td></tr></table>
</div>

Answer 1

您的问题似乎与您使用的 niceforms Javascript 库有关。

由于您的某些 radio 在某些时候是不可见的，因此此库正在设置用于在屏幕外进行漂亮格式的图像(通过将其左侧和顶部设置为 0)。

为了修复它，您可以在 showstuff() 函数中调用 NFFix()。