使用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";