Сделать изображение, которое ранее скрывалось CSS, видимым на основе переключателя, выбранного с помощью Javascript

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. Поместите идентификатор в таблицу, чтобы этот код мог удостовериться, и выберите только нужную таблицу (не все таблицы в документе).
2. Поместите имя класса на изображение, которое вы хотите показать, чтобы оно могло быть уникально нацелено и не было риска получить любое другое изображение, которое может быть добавлено в таблицу в будущем.

Однажды, выполнив эти два шага, код может выглядеть следующим образом:

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

---

Если бы вам пришлось делать это в простом javascript без полного механизма выбора, я бы сделал это иначе, создав значение id для изображения. Предполагая, что вы положили идентификатор "choices" на стол, он будет выглядеть примерно так:

// 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/