php/jQuery 根据数据库中的单选按钮设置更改是否显示/隐藏

Question

我对 jQuery 还很陌生，还在苦苦挣扎。最后，我可以让 jQuery 在单击按钮时切换显示/隐藏。我现在仍在努力解决的是如何使显示/隐藏与页面加载时按钮的状态相匹配。该值来自使用 php 的数据库。所以我不知道会是什么。我真的很感激一些帮助！

基本上，如果选中 id 为“specify”的按钮，div 中的文本就会显示；如果选中“打开”按钮，则文本将被隐藏。我设置了 css，以便 div 的指定类使其隐藏。我应该这样做吗？

代码如下：

HTML

<input type="radio" name="volneed" id="open" class="required" value="open to all"
 <? if($thisvolneed=='open'){echo 'checked="checked"';} ?> />
<label for="open"> Open to all </label>

<input type="radio" name="volneed" id="specify"  class="required" value="specify"
<? if($thisvolneed=='specify'){echo 'checked="checked"';} ?> /> 
<label for="specify"> Specify types of volunteers needed </label>

<div class="specify"><p>Some info...</p></div>

CSS:

.specify{display:none;}

jQuery:

$(document).ready(function() {          
    $("#specify").change(function(evt) {
    evt.preventDefault();
    $(".specify").show();
    });

    $("#open").change(function(evt) {
    evt.preventDefault();
    $(".specify").hide();
    });
});

Answer 1

我认为创建一个类来隐藏 > 是解决该问题的相当标准的方法。干得好！无需在 > 上使用 show 或 hide 函数，它也同样容易使用 CSS 方法时，请使用 addClass 或 removeClass。此外，如果需要在页面加载时应用该类，可以使用 PHP 显示 > 的初始状态。

<div <? if($thisvolneed=='specify'){echo 'class="specify"';} ?>><p>Some info...</p></div>

Answer 2

一个小小的尝试：

<style>
.specify{display:none;}
</style>
<script src="jquery.min.js"></script>
<input type="radio" name="volneed" id="open" class="required myOption" value="open to all" checked="checked" />
<label for="open"> Open to all </label>

<input type="radio" name="volneed" id="specify"  class="required myOption" value="specify" /> 
<label for="specify"> Specify types of volunteers needed </label>

<div class="specify"><p>Some info...</p></div>
<script>
    $(document).ready(function(){
        $('.myOption').click(function(){
            var $stat = $('#specify')[0].checked;
            if( $stat == true )
                $('.specify').show();
            else
                $('.specify').hide();
        });
    });
</script>

我确信它也可以再次优化..