простой глюк jQuery относительно эффектов fadeIn / fadeOut для контента - PullRequest
Новая
       9

простой глюк jQuery относительно эффектов fadeIn / fadeOut для контента

0 голосов
/ 24 января 2012

Сценарий: У меня есть вопрос, который имеет 2 переключателя и две подчиненные формы: subformA и subformB

Когда пользователь проверяет 1-ую подчиненную кнопку переключателя, он должен исчезнуть, если он проверяет2-й переключатель subformB должен исчезнуть.

Проблема: Я выполнил код, но проблема в том, что когда пользователь проверяет 1-й переключатель, появляется субформа A и, если он изменяет свое мнениеи щелкает другой вариант вместо предыдущего.SubformB присоединяется к subformA.

Запрос: Я хочу сделать эти формы взаимоисключающими (эффект конкатенации не должен возникать, если пользователь повторно выбирает переключатель).Это маленькая вещь, которую я не могу заметить.Спасибо!

мой код JS: : 

<!-- script for the Div -->
<script type="text/javascript" >
$(document).ready(function() {
$('#subafform').hide();
 $("#element_4_1").click( function(){
    if( $(this).is(':checked')) {
           $('#subafform').fadeIn();
    } else {
        $('#subafform').fadeOut();
    }
    });
    });

</script>

Другие части кода: 

<script type="text/javascript" >
$(document).ready(function() {
$('#subbform').hide();
 $("#element_4_2").click( function(){
    if( $(this).is(':checked')) {
           $('#subbform').fadeIn();
    } else {
        $('#subbform').fadeOut();
    }
    });
    });

</script>




 <li id="li_4" >
  <label class="description" for="element_4">Are you affiliated with Company? </label>
  <span>
   <input id="element_4_1" name="element_4" class="element radio required" type="radio" value="1" />
   <label class="choice" for="element_4_1">Yes</label>
   <input id="element_4_2" name="element_4" class="element radio required" type="radio" value="2" />
   <label class="choice" for="element_4_2">No</label>

  </span> 
  </li> 






<li id="subafform">
  <ul>
  <li id="li_5_1" >
  <label class="description" for="element_5_1">Department/College </label>
  <div>
   <input id="element_5_1" name="element_5_1" class="element text medium" type="text" maxlength="255" value=""/> 
  </div> 
  </li>  <li id="li_5_2" >
  <label class="description" for="element_5_2">Department Chair </label>
  <div>
   <input id="element_5_2" name="element_5_2" class="element text medium" type="text" maxlength="255" value=""/> 
  </div> 
  </li>  



</li>



<li id="subbform>

........

....

</li>

Ответы [ 3 ]

3 голосов
/ 24 января 2012

Пример DOM: 

<form class="subform" id="subforma">
    <button>Form A</button>
</form>

<form class="subform" id="subformb">
    <button>Form B</button>
</form>

<form id="switcher">
    <input type="radio" name="show_form" value="subforma"> Show Form A<br />
    <input type="radio" name="show_form" value="subformb"> Show Form B<br />
</form>

Пример JQuery: 

$('input[name="show_form"]').click(function(){
    var form_id = this.value;
    $('.subform:visible').fadeOut();
    $('#' + form_id).fadeIn();
});

Пример CSS: 

.subform {
    display:none;
    position:absolute;
    top:0;
    left:0;
}

#switcher {
    position:relative;
    top:100px;
}

Демо:

http://jsfiddle.net/AlienWebguy/hFax3/

1 голос
/ 24 января 2012

Если кто-то нажмет и уже отметит переключатель, он останется отмеченным.Так что ваше заявление if else не приносит вам никакой пользы.Я хотел бы, чтобы форма B всегда исчезала при нажатии кнопки A, а форма A всегда исчезала при нажатии кнопки B. Что-то простое, как это: 

$("#element_4_1").click(function() {
    $('#subafform').fadeIn();
    $('#subbfform').fadeOut();
}
1 голос
/ 24 января 2012

То, что вы делаете, проверяет, нажата ли отдельная радиокнопка, и затем проверяет, выбрана она или нет. Ну, так как пользователь нажал на переключатель, он будет выбран.

То, что вам нужно сделать, это удалить этот оператор if и просто получить его так, чтобы при нажатии кнопки A исчезали subformA in и subformB out. Если jQuery умный (я сомневаюсь в этом ...), он не исчезнет из subformB, если он уже исчез, так что проблем нет.

Аналогичным образом, когда нажата кнопка B, исчезают субформа B и субформа A.

...