我無法使用jQuery刪除/設置子項

Question

 function func(show = true) { var parent = $('#foo'); var child = '<div id="bar"></div>'; if (show) $(parent).fadeIn(350, function(){$(parent).html(child);}); else $(parent).hide(0).delay(350, function() { $(parent.children()).remove() }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="foo"></div> 

我該怎么做呢？，它無法正常工作，我也不知道如何:(

謝謝！

Answer 1

這是一個例子。 無需jQuery進行演示，CSS即可為您做所有事情。 根據您的問題，沒有理由進行任何DOM操作（刪除添加div），因此我沒有提供示例。

 $(document).ready(function(){ $('input').on('click', function(){ var isChecked = $(this).prop("checked"); $('#foot').toggleClass("hidden", !isChecked); $('#bar').toggleClass("is-fading", isChecked); }); }); 

 .hidden { adisplay: none; } .fade-in{ opacity: 0; } .fade-in.is-fading{ transition: opacity 2.0s ease-in; opacity: 1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" value="test">Booya <div id="foo" class="hiddne"> <div id="bar" class="fade-in">Hello</div> </div> 

Answer 2

不知道您的用例，但我認為您正在尋找代碼方面的改進。

 function func(show = true) { var parent = $('#foo'); var child = '<div class="bar">Hi Bar</div>'; if (show) parent.fadeIn(350, function() { parent.html(child) }); else parent.fadeOut(350); }