根据使用Javascript选择的单选按钮，使以前被CSS隐藏的图像可见

Make an image, which is previously hidden by CSS, visible based on the radio button selected using Javascript

本文关键字：CSS 隐藏 图像 Javascript 选择 单选按钮      更新时间：2023-09-26

一个表中有25行。每一行都有一个属性、一个图像（勾号符号）和5个单选按钮，将所述属性从1-5评级。当点击其中一个按钮时，我希望之前被css隐藏的图像（勾号）可见。

html是

         <table>
                <tr>
                    <td width="15px"><img id="1ai" src="../PNG Files/Untitled-3.gif" /></td>
                    <td style="text-align: left" >Course Structure and it's revelence</td>
                    <td width="6%"><input type="radio" name="1a" value="5" id="1a1" /></td>
                    <td width="6%"><input type="radio" name="1a" value="4" id="1a2" /></td>
                    <td width="6%"><input type="radio" name="1a" value="3" id="1a3" /></td>
                    <td width="6%"><input type="radio" name="1a" value="2" id="1a4" /></td>
                    <td width="6%"><input type="radio" name="1a" value="1" id="1a5" /></td>
                </tr>
                <tr bgcolor="#FCFFE8">
                    <td width="15px"><img id="2ai" src="../PNG Files/Untitled-3.gif" /></td>
                    <td style="text-align: left" >Syllabus and it's coverage</td>
                    <td width="6%"><input type="radio" name="2a" value="5" id="2a1" /></td>
                    <td width="6%"><input type="radio" name="2a" value="4" id="2a2" /></td>
                    <td width="6%"><input type="radio" name="2a" value="3" id="2a3" /></td>
                    <td width="6%"><input type="radio" name="2a" value="2" id="2a4" /></td>
                    <td width="6%"><input type="radio" name="2a" value="1" id="2a5" /></td>
                </tr>
         </table>

这些图像已通过CSS隐藏。Javascript应该确定选中了哪个单选按钮，然后使相应的图像可见。

您可以这样做：

$("table input[type='radio']").click(function() {
    $(this).closest("tr").find("img").show();
});

单击某个单选按钮时，它会找到所单击单选按钮的父行，找到该行中的图像并将其显示出来。这假设该图像以前用display: none隐藏过。

为了更好的长期维护，您应该：

  1. 在表上放一个ID，这样代码就可以确保只选择所需的表（而不是文档中的所有表）
  2. 将类名放在要显示的图像上，这样它就可以成为唯一的目标，并且将来不会有任何其他图像被添加到表中的风险

一旦完成了这两个步骤，代码可能会如下所示：

$("#choices input[type='radio']").click(function() {
    $(this).closest("tr").find(".tick").show();
});

如果您必须在没有完整选择器引擎的情况下使用纯javascript进行操作，那么我会通过制造图像的id值来进行不同的操作。假设你已经把"选择"id放在桌子上，它会变成这样：

// add event cross browser
function addEvent(elem, event, fn) {
    if (elem.addEventListener) {
        elem.addEventListener(event, fn, false);
    } else {
        elem.attachEvent("on" + event, function() {
            // set the this pointer same as addEventListener when fn is called
            return(fn.call(elem, window.event));   
        });
    }
}
addEvent(document.getElementById("choices"), "click", function(e) {
    // use event bubbling to look at all radio clicks 
    // as they bubble up to the table object
    var target = e.target || e.srcElement;
    if (target.tagName == "INPUT" && target.type == "radio") {
        // manufacture the right ID and make that image visible
        var name = target.name;
        document.getElementById(name + "i").style.display = "inline";
        console.log("show image " + name + "i");
    }    
});

下面是一个工作示例：http://jsfiddle.net/jfriend00/uMUem/

相关文章：