根据使用Javascript选择的单选按钮，使以前被CSS隐藏的图像可见 [英] Make an image, which is previously hidden by CSS, visible based on the radio button selected using Javascript

问题描述

表中有25行.每行具有一个属性，一个图像(刻度符号)和5个单选按钮，将所述属性从1-5分级.当单击其中一个按钮时，我希望使以前由css隐藏的图像(刻度符号)可见.

There are 25 rows in a table. Each row has an attribute, an image(tick symbol) and 5 radio buttons rating the said attribute from 1-5. when one of the buttons is clicked, I want the image(tick symbol) which is previously hidden by css to be made visible.

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应该确定选中了哪个单选按钮，然后使相应的图像可见.

The images have been hidden through CSS. Javascript should identify which radio button is checked and then make visible the corresponding image.

推荐答案

您可以这样做:

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

单击单选按钮时，它将找到被单击单选按钮的父行，在该行中找到图像并显示它.假定图像以前已用display: none隐藏.

When a radio is clicked, it will find the parent row of the one that is clicked, find the image in that row and show it. This assumes that the image is previously hidden with display: none.

为了获得更好的长期维护，您应该:

For better long term maintenance, you should:

1. 在表上放置一个ID，以便此代码可以确保并仅选择所需的表(而不是文档中的所有表).
2. 在要显示的图像上放置一个类名，以便可以将其唯一地定位，并且不存在将来获得可能添加到表中的任何其他图像的风险.

完成这两个步骤后，代码可能如下所示:

Once, you had done these two steps, the code might look like this:

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

---

如果您必须使用纯JavaScript而不使用完整的选择器引擎来执行此操作，那么我会通过制造图像的ID值来进行不同的操作.假设您已将选择" ID放在桌子上，它将像这样:

---

If you had to do it in plain javascript without a full selector engine, then I'd do it differently by manufacturing the id value of the image. Assuming you had put the "choices" id on the table, it would go something like this:

// 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隐藏的图像可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！