Как передать значение переключателя в ссылку img в Javascript?

Question

Я пытаюсь передать значение переключателя на Javascript вместо всей ссылки img, но изображение не отображается. Если я передам ссылку на все изображение на Javascript, изображение сможет отображаться на дисплее.

$(document).ready(function () {
    $(':radio').change(function (e) {
        //clear the div
        $('#display').html('');
        //update the div
        $(':radio:checked').each(function (ind, ele) {
            $('#display').html('<img src="/images/"') + val() + '.png">');
        });
    });
});

<input type="radio" name="vehicle" value="motor_1"><img src="/images/motor_1.png" width="150px" height="150px">

Answer 1

@ jmp цель состоит в том, чтобы отобразить изображение, когда оно проверено

В общем, этот код будет отображать элемент img при щелчке по нему

Код

<style>img{ display: none}</style>
<input type="radio" name="vehicle" value="motor_1">
<img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2018/11/24/16/cat.jpg" >
<script>
(async () => {
    let radioBtn = document.querySelector("body > input[name=vehicle]");
    radioBtn.onclick = (event) => {
        if (radioBtn && radioBtn.checked) {
            let img = document.querySelector('img');
            img.style.display = 'inherit';
        }
    }
})();
</script>

В этом случае, похоже, мы хотим параметризовать строку src. Это ответ на вопрос? Я использовал ссылку из { ссылка }

код

$('#display').html(`<img src="/images/${ele.value}.png">`);

, предполагая, что ele является элементом переключателя.

Answer 2

Для метода jQuery val() вместо простого вызова val() вы хотите:

$(this).val()

Или собственное свойство элемента:

this.value