使用jquery隱藏和顯示基於廣播值的表格

Question

所以我有我的代碼一半工作。

當用戶點擊沒有發生任何事情。這正是應該發生的事情。當用戶點擊是時，顯示下一個問題。

問題是檢查不會移動到是，但當用戶單擊是時顯示下一個問題。如果用戶再次點擊是，它隱藏了問題，但它應該這樣做的否。

任何人都可以指向正確的方向。

$(document).ready(function(){ 


    $('.show_hide').showHide({    
     speed: 1000, // speed you want the toggle to happen  
     easing: '', // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI 
     changeText: 1, // if you dont want the button text to change, set this to 0 
     showText: 'Yes',// the button text to show when a div is closed 
     hideText: 'No' // the button text to show when a div is open 

    }); 


}); 

</script> 

<form class="form-signin" role="form"> 
I am having a Cloud My Office log in issue 
<input type="radio" name="myofficeissue" id="0" value="No">No 
<input type="radio" name="myofficeissue" class="show_hide" rel="#slidingDiv" id="1" value="Yes">Yes 
    <div id="slidingDiv"> 
     I am having a username and password issue. 
     <input type="radio" name="passwordissue" id="passwordissue-0" value="No">No 
     <input type="radio" name="passwordissue" class="show_hide" rel="#slidingDiv_2" id="passwordissue-1" value="Yes">Yes 
    </div> 
<a href="#" class="show_hide" rel="#slidingDiv_2"></a><br /> 
    <div id="slidingDiv_2"> 
    I need to reset my password 
     <input type="radio" name="password" id="password-0" value="No" checked="checked" required> No 
     <input type="radio" name="password" id="password-1" value="Yes" required> Yes 
     </br> 
     My username needs updated. 
     <input type="radio" name="username" id="username-0" value="No" checked="checked" required> No 
     <input type="radio" name="username" id="username-1" value="Yes" required> Yes</br> 
My account is locked out 
<input type="radio" name="locked" id="locked-0" value="No" checked="checked" required> No 
     <input type="radio" name="locked" id="locked-1" value="Yes" required> Yes</br> 
I am experiencing other problems 
     <input type="radio" name="other" id="other-0" value="No" checked="checked" required>No 
     <input type="radio" name="other" id="other-1" value="Yes" required>Yes</br> 
    </div> 

這是我在

(function ($) { 
    $.fn.showHide = function (options) { 

    //default vars for the plugin 
     var defaults = { 
      speed: 1000, 
      easing: '', 
      changeText: 0, 
      showText: 'Show', 
      hideText: 'Hide' 

     }; 
     var options = $.extend(defaults, options); 

     $(this).click(function() { 
// optionally add the class .toggleDiv to each div you want to automatically close 
         $('.toggleDiv').slideUp(options.speed, options.easing); 
      // this var stores which button you've clicked 
      var toggleClick = $(this); 
      // this reads the rel attribute of the button to determine which div id to toggle 
      var toggleDiv = $(this).attr('rel'); 
      // here we toggle show/hide the correct div at the right speed and using which easing effect 
      $(toggleDiv).slideToggle(options.speed, options.easing, function() { 
      // this only fires once the animation is completed 
      if(options.changeText==1){ 
      $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText); 
      } 
       }); 

      return false; 

     }); 

    }; 
})(jQuery); 

插件這裏是活鏈接。 http://jcsites.juniata.edu/students/bookhjr10/flashpoint/test2.html

我的問題是如何獲得否隱藏問題和是顯示它們。我將會有一堆嵌套問題，這只是第一個嵌套。

感謝

Answer 1

相信檢查沒有移動到是因爲你在你的事件處理程序返回false。 「否」永遠不會做任何事情，因爲您的插件運行在類爲「.show_hide」的元素上，該元素只在您的「是」收音機上運行。

這就是說，這將變得很笨重並且不是一個好方法。我強烈建議將您的調查問卷存儲爲一個對象，並編寫一些方法，以根據需要呈現表單...

var questionnaire = {}; 

questionnaire["cloud-office"].question = "I am having a Cloud My Office log in issue"; 
questionnaire["cloud-office"].children = {}; 
questionnaire["cloud-office"].children["login"].question = "I am having a username and password issue"; 
questionnaire["cloud-office"].children["other-problem"].question = "I am having a problem with something else"; 
questionnaire["cloud-office"].children["other-problem"].children = {}; 
questionnaire["cloud-office"].children["other-problem"].children["slow-computer"].question = "My computer is slow"; 
questionnaire["cloud-office"].children["other-problem"].children["dirty-keyboard"].question = "My keyboard is super gross";