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

Question

一个表有 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 应识别选中了哪个单选按钮，然后使相应的图像可见。

Answer 1

你可以这样做：

$("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/