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。

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

在表格上放置一个ID，以便此代码可以确保并仅选择所需的表格（而不是文档中的所有表格）。
在要显示的图像上放置一个类名，以便它可以是唯一的目标，并且不存在将来可能添加到表中的任何其他图像的风险。

有一次，你完成了这两个步骤，代码可能如下所示：

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

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

1 个答案: