Граница изображения Jquery на радио

Я пытаюсь привязать изображение границы, чтобы оно отображалось при выборе радиоблока. Вот код:

<table width="100%">
                    <tr>
                        <td><img src="img/option/collar.png" width="100px" id="option_img"><br><input class="optionVent" type="radio" name="vent" value="1">vent</td>
                        <td></td>
                        <td><img src="img/option/collar.png" width="100px" id="option_img"><br><input class="optionVent" type="radio" name="vent" value="1">vent</td>
                    </tr></table>

Вот JavaScript:

$(".optionVent").click(function(){
    if($(this).is(':checked')){
        $("#option_img").css('border', "solid 1px orange"); 
    }  
});

В настоящее время, когда выбран 1 блок, оба изображения получают границы. Я не могу найти способ привязать изображения к блоку выбора радио.

Спасибо,

Источник

3 ответа

Решение
$(".optionVent").on('change', function(){
    $('img').css('border', 'none'); //add a class to be more specific
    $(this).closest('td').find('img').css('border', 'solid 1px orange'); 
});

Кроме того, идентификаторы являются уникальными, вы можете иметь только один из каждого идентификатора, а не несколько.

Источник

Я хотел бы добавить класс к вашей таблице стилей, как .selected_img { border: solid 1px orange; } затем отредактируйте ваш код и разметку примерно так:

HTML

<table width="100%">
  <tr>
    <td>
        <div class="img_box">
            <label for="vent1">
                <img src="img/option/collar.png" width="100px" id="option_img1" /><br>
                <input class="optionVent radio_img1" type="radio" name="vent" id="vent1" value="1" />
                vent one
            </label>
        </div>
    </td>
    <td></td>
    <td>
        <div class="img_box">
            <label for="vent2">
                <img src="img/option/collar.png" width="100px" id="option_img2" /><br>
                <input class="optionVent radio_img2" type="radio" name="vent" id="vent2" value="1" />
                vent two
            </label>
        </div>
    </td>
  </tr>
</table>

JS

$(".optionVent").change(function() {
    $('.img_box').removeClass('selected_img');
    $(this).closest('.img_box').addClass('selected_img');
});

CSS

.img_box {
    display: inline-block;
    padding: 20px;
}
.selected_img {
    border: 1px solid orange;
}

Мне нравится добавлять классы вместо того, чтобы включать стили в javascript, чтобы вы могли редактировать все свои стили в своем CSS.

DEMO

Нажмите для JSFiddle Демо

Источник

Лучшей логикой было бы использовать CSS для достижения границы и просто использовать jQuery для добавления / удаления этого класса в выбранные элементы. Это позволяет отделить стили CSS от содержимого HTML, как и должно быть.

$(".optionVent").click (function {
  // First, go up two levels and back down one to remove the classes
  $(this).parent().parent().children().removeclass("selected");

  // Secondly, add the class to the parent element
  $(this).parent().addclass("selected");
});

Ваш CSS будет тогда:

.selected {
  border: solid 1px orange;
}

Вы можете изменить это по мере необходимости, чтобы получить желаемый эффект.

Источник
Другие вопросы по тегам