我正在尝试使用 Jquery 根据用户选择的内容显示或多或少的表单。如果用户选择"is",则会显示更多表单。我计划用许多不同的顶级问题来做到这一点,然后根据是或否解锁更多问题。
在此链接中显示了我所拥有的内容。 http://jcsites.juniata.edu/students/bookhjr10/flashpoint/test2.html
我遇到的问题是,用户需要检查两次"is"才能使问题消失,但当用户检查“否”时,问题应该关闭。
代码: jQuery
$(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: 0, // 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>
HTML 表单:
<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>
</div>
CSS
<style>
body{
font-family:Verdana, Geneva, sans-serif;
font-size:14px;}
#slidingDiv, #slidingDiv_2{
display:none;
}
</style>
我的问题是。这是做这样的事情的最好方法吗? 有没有办法让 No 选项关闭 div? 任何帮助表示赞赏。
最佳答案
我可以看到你的项目变得相当复杂,所以我认为在 JavaScript 中包含所有逻辑并不是解决这个问题的正确方法。因此,我在 JavaScript 中创建了一种逻辑 Controller ,并将逻辑需求与一些数据属性分离到 html 中。
Here is the code in action.该解决方案现在非常灵活且易于维护。您所需要做的就是将需要出现和消失的部分包装在 div
中,并为它们提供一个名为 “data-view-conditions”
的属性。此属性可以包含需要满足才能显示的多个条件。
条件以逗号分隔,包含输入名称和所需值。依次用冒号分隔。这支持单选和复选框输入。您还可以仅提供不带值的名称,如果至少检查或选择了该输入而不关心值,则条件将“匹配”。以下是一些示例条件。
data-view-conditions="name"
data-view-conditions="name:1"
data-view-conditions="name:1,name2:3,name3:test"
data-view-conditions="name4:123,name5"
JavaScript:
jQuery(function($){
// Prevents errors in old IE.
if(!window.console || !window.console.log) window.console = {log: function(){}};
// Enable debugging for complex logic.
var debug = true;
function checkConditions(inputs, views){
views.each(function(){
var view = $(this);
var conditions = view.attr('data-view-conditions').split(',');
var display = true;
// Loop over all required conditions to be met.
for(var i = 0; i < conditions.length; i++){
var name = conditions[i].split(':')[0];
var value = conditions[i].split(':')[1];
var input = inputs.filter('[name="' + name + '"]:checked');
if(debug) console.log('\nRecalculating view conditions.');
if(!input.length){
display = false;
if(debug) console.log('View not show as no :checked input with the name "' + name + '" was found.');
}else{
if(value != undefined && input.val() != value){
display = false;
if(debug) console.log('View not show as no :checked input with the name "' + name + '" has the value of "' + input.val() + '". Value needed was: "' + value + '".');
}
}
}
if(display){
view.css({display: 'block'});
}else{
view.css({display: 'none'});
}
});
}
$('form').each(function(){
var form = $(this);
var inputs = form.find('input[type="checkbox"], input[type="radio"]');
var views = form.find('[data-view-conditions]');
// Recalculate which views to be shown each time the inputs change.
inputs.on('change', function(e){
checkConditions(inputs, views);
});
// Check conditions to set up required view state on page load.
checkConditions(inputs, views);
});
});
HTML:
<form>
<label for="i1">Input 1</label>
<input id="i1" type="radio" name="name1" value="1">
<label for="i2">Input 2</label>
<input id="i2" type="radio" name="name1" value="2">
<div data-view-conditions="name1:2">
<p>Hello</p>
<label for="i3">Click me</label>
<input id="i3" type="checkbox" name="name2">
<div data-view-conditions="name2">
<p>It works!</p>
</div>
</div>
</form>
关于javascript - 根据单选是或否选择显示或隐藏表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22820113/