php / jQuery изменяет, показывать или скрывать, основываясь на настройке переключателя из базы данных - PullRequest
Новая
       25

php / jQuery изменяет, показывать или скрывать, основываясь на настройке переключателя из базы данных

0 голосов
/ 24 марта 2011

Я все еще новичок в jQuery и борюсь. Наконец, я могу заставить jQuery переключать показ / скрытие при нажатии кнопки. То, с чем я до сих пор борюсь, это как показать / скрыть, чтобы соответствовать состоянию кнопки при загрузке страницы. Значение поступает из базы данных с использованием php. Так что я не знаю, что это будет. Буду очень признателен за помощь!

Обычно, если кнопка с идентификатором 'указать' отмечена, текст в 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();
    });
});

Ответы [ 2 ]

1 голос
/ 24 марта 2011

небольшая попытка: 

<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>

m уверен, что он может быть снова оптимизирован ..

1 голос
/ 24 марта 2011

Я думаю, что создание класса для сокрытия <code><div> является довольно стандартным способом решения проблемы. Отлично сработано! Вместо использования функции show или hide на <code><div> , также просто использовать addClass или removeClass при использовании подхода CSS. Кроме того, начальное состояние <code><div> может быть показано с помощью PHP для применения класса при необходимости при загрузке страницы. 

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