jQuery .toggle不能在CSS交集工作

我試圖切換單擊單選按鈕時CSS交集的可見性。不幸的是，下面的代碼似乎不起作用。它在.css（'display'，'block'）時可以工作，但不能提供所需的切換功能。jQuery .toggle不能在CSS交集工作

HTML：

<div class="input"> 
    <label for="type">What is your aim?</label> 
    <div class="radio"> 
     <div class="radio-el"> 
     <label for="dc">Data Collection</label> 
     <input id="dc" type="radio" name="aim" value="dataCollection"> 
     </div> 
     <div class="radio-el"> 
     <label for="inc">Opt-in Incentive</label> 
     <input id="inc" type="radio" name="aim" value="incentive"> 
     </div> 
    </div> 
    </div> 
    <div class="input optin"> 
    <p>All the additional form elements go here</p> 
    </div>

CSS：

.input.optin{ 
    display: none; 
}

JS：

$('input[type=radio][name=aim]').change(function(){ 
    if ($(this).val() == 'incentive') { 
     $('.input.optin').toggle(); 
    } 
})

JSFiddle

來源

2016-01-10 summer

你不想切換按鈕，但在特定的值顯示或隱藏像此：

$('input[type=radio][name=aim]').change(function() { 
    if ($(this).val() == 'incentive') { 
    $('.input.optin').show(); 
    } else { 
    $('.input.optin').hide(); 
    } 
});

是正確的？

JSFiddle for test it

來源

2016-01-10 13:21:55 Baro

toggle()方法接受一個布爾值，顯示或隱藏：

$('input[type=radio][name=aim]').change(function(){ 
    $('.input.optin').toggle($(this).val() === 'incentive'); 
});

來源

2016-01-10 13:23:26

這樣做的問題是，如果沒有CSS隱藏的，它只能附加形式數據在第一位。如果你把css拿走了切換工作，但它已經顯示了額外的表單元素。 – summer

@summer它是你在找什麼：https://jsfiddle.net/jmrkotoh/對不起，但我真的很難明白你的意思？！ –

@沃爾夫感謝隊友。這幾乎就是我的意思。最好我會在開始時取消選中單選按鈕，並且只有在單擊'.incentive'單選按鈕後纔會顯示隱藏的元素。 – summer

您還可以使用下面的代碼：

$(document).ready(function(){ 

    $('input[type=radio][name=aim]').change(function(){ 
     var $x=$(this).val(); 
     if ($x=='incentive') { 
     $('.optin').toggle(); 
     } else { 
     $('.optin').show(); 
     } 
    }); 

});

來源

2016-01-10 14:29:58

-1

所以我能解決這個問題。這似乎是我能夠重寫初始顯示的唯一方式：無需添加類來覆蓋它。

HTML：

<div class="input"> 
    <label for="type">What is your aim?</label> 
    <div class="radio"> 
    <div class="radio-el"> 
     <label for="dc">Data Collection</label> 
     <input id="dc" type="radio" name="aim" value="dataCollection"> 
    </div> 
    <div class="radio-el"> 
     <label for="inc">Opt-in Incentive</label> 
     <input id="inc" type="radio" name="aim" value="incentive"> 
    </div> 
    </div> 
</div> 
<div class="input optin"> 
    <p>All the additional form elements go here</p> 
</div>

CSS：

.input.optin{ 
    display: none; 
} 
.input.optin.show{ 
    display: block; 
}

JS：

$('input[type=radio][name=aim]').click(function() { 
    $('.input.optin').toggleClass('show'); 
})

Check out the jsfiddle here

來源

2016-01-10 15:22:24 summer

jQuery .toggle不能在CSS交集工作

回答

相關問題