Триггер для скрытия / отображения переключателей - PullRequest
Новая
       7

Триггер для скрытия / отображения переключателей

0 голосов
/ 03 апреля 2019

У меня есть две радиокнопки, которые действуют как селектор изображений.Я хочу прослушать, проверена ли первая радио-кнопка.Если флажок установлен, я хочу, чтобы другой переключатель был скрыт.

Вот что я пробовал до сих пор: 

$('input[value="Dwarf.png|25|25"]').on("change", function(){

{
    if ($(this).is(':checked') && $(this).val() == 'Yes') {

        $('input[value="Gnome.png|25|25"]').hide();
        $('body').find('img[src$="./images/imgsel/Gnome.png"]').hide();

}

};

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="pf_faction" id="pf_faction_0" value="Dwarf.png|25|25">
<img src="./images/imgsel/Dwarf.png" width="25" height="25" title="Dwarf" alt="Dwarf">

<input type="radio" name="pf_faction" id="pf_faction_1" value="Gnome.png|25|25">
<img src="./images/imgsel/Gnome.png" width="25" height="25" title="Gnome" alt="Gnome">

Но это ничего не делает.Я проверил, что .hide () работает, попробовав его с помощью функции готовности документа, и я знаю, что этот бит работает, но не может решить остальную часть головоломки.

Любая помощь приветствуется.

Ответы [ 3 ]

0 голосов
/ 03 апреля 2019

То есть вы хотите 

$(function() {
 $('input[value="Dwarf.png|25|25"]').on('change', function(e){
    if ($(this).is( ":checked" )) {           
      $('input[value="Gnome.png|25|25"]').hide();
      $('img[src="./images/imgsel/Gnome.png"]').hide();
    }                   
 });
});

демо: https://jsbin.com/cateyusawa

0 голосов
/ 03 апреля 2019

Можете попробовать это 

// script.js
$(function() {
    $('input[value="Dwarf.png|25|25"]').click(function(){

        $('input[value="Gnome.png|25|25"]').hide();
        $('body').find('img[src$="./images/imgsel/Gnome.png"]').hide();
    })
    $('input[value="Gnome.png|25|25"]').click(function(){
        $('input[value="Dwarf.png|25|25"]').hide();
        $('body').find('img[src$="./images/imgsel/Dwarf.png"]').hide();
    })
});

<!-- HTML  -->
<html>
<head>
<title>jQuery Hello World</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


</head>

<body>


<input type="radio" name="pf_faction" id="pf_faction_0" value="Dwarf.png|25|25">
<img src="./images/imgsel/Dwarf.png" width="25" height="25" title="Dwarf" alt="Dwarf">

<input type="radio" name="pf_faction" id="pf_faction_1" value="Gnome.png|25|25">
<img src="./images/imgsel/Gnome.png" width="25" height="25" title="Gnome" alt="Gnome">

<script src="script.js"></script>
</body>
</html>
0 голосов
/ 03 апреля 2019

Замените function(){ некоторым событием jQuery, которое будет срабатывать при проверке входного радио.

Что-то вроде: 

$("input[type=radio]").on("change", function(){ //do your logic });

Когда вы выбираете $(this) в этом случае, еслиутверждение, что не будет знать, кто this.Вы должны предоставить правильный контекст.

...