CSS

Question

哦，伙计，我完全搞砸了我的最后一个问题......一定是困了或者其他什么:-)让我们再试一次。

我是一名20年的HTML兽医，从未做过多次javascript等，但多年来一直有需要。我的编码非常基础，主要是剪切和粘贴，然后更改它以使其工作： - ）

我正在创建一个网站，您可以在其中选择带有单选按钮的文本字段数。所选的文本字段是动态显示和要求的，其余部分是显式隐藏和不需要的，因此用户可以选择说3个名称然后选择2个名称，第三个名称和更高名称将不会因为要求被释放而阻止提交。

我现在所做的工作，但至少可以说是难看。我正在为所有元素和每个单选按钮调用click for hide，hide，required = true和required = false进行更改。代码太多了！

我喜欢将一些建议变成一个代码片段来处理所有内容......无论如何都要代码！

CSS

body,td,th {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: medium;
}
body form select {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: medium;
}
.submit {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: medium;
}
body form {
text-align: center;
margin-top: 10px;
}
.submission {
margin:0 auto 0 auto;
height:500px;
width:400px;
border:#000000 solid 3px;
float:left;
padding: 20px 0;
}
.center {
margin:0 auto;
width: 812px;
}
.left{
text-align:left;
}
.right{
float:; 
}
.eighty{
width:80%;
}
.marg_20{
margin-left:20px;
}
.marg_40{
margin-left:40px;
}
.marg_60{
margin-left:60px;
}
.content{
display:none;
}
.up20{
margin-top:-20px;
}
.signMain{
width:200px;
height:100px;
background:WhiteSmoke ;
margin:20px auto 0;
}
.test{
width: 198px;
height: 20px;
margin-right: auto;
margin-left: auto;
float: left;
margin-bottom: 5px;
font-size:20px;
text-align:center;
}
.submitDiv {
height: 100px;
}
.signCreatorDiv {
height: 400px;
}
.namesColumn{
width:200px;
height:350px;
margin:0 auto;
}

的jQuery

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('.NameRad1').click(function() {
$('div.NameImg.content:lt(1)').show();
$('div.NameImg.content:gt(0)').hide();
$('input#textBox.test:lt(1)').attr("required",true);
$('input#textBox.test:gt(0)').attr("required",false);
});
$('.NameRad2').click(function() {
$('div.NameImg.content:lt(2)').show();
$('div.NameImg.content:gt(1)').hide();
$('input#textBox.test:lt(2)').attr("required",true);
$('input#textBox.test:gt(1)').attr("required",false);
});
$('.NameRad3').click(function() {
$('div.NameImg.content:lt(3)').show();
$('div.NameImg.content:gt(2)').hide();
$('input#textBox.test:lt(3)').attr("required",true);
$('input#textBox.test:gt(2)').attr("required",false);
});
$('.NameRad4').click(function() {
$('div.NameImg.content:lt(4)').show();
$('div.NameImg.content:gt(3)').hide();
$('input#textBox.test:lt(4)').attr("required",true);
$('input#textBox.test:gt(3)').attr("required",false);
});
});//]]>  
</script>

HTML

    <body>
<form action="https://im-here.foxycart.com/cart" method="post" accept-charset="utf-8">
<div class="center">
<!--Begin leftSide-->
<div class="submission">    
<!--Begin hiddenInputs-->
<input type="hidden" name="name" value="I'm Here Notification Sign" />
<input type="hidden" name="price" value="10" />
<!--End hiddenInputs-->
<!--Begin colorSelection-->
<div class="left eighty center">
<label>Color</label>
<br>
<select id="colorSelect" name="Color" tabindex="1" required >
<option value="" selected="selected" disabled>Choose A Color...</option>
<option value="Black">Black</option>
<option value="DarkGrey">Brushed Aluminum</option>
<option value="DarkKhaki">Brass</option>
</select>
</div>
<!--End colorSelection-->
<br>
<!--Begin nameSelection-->
<div class="left eighty center">
Number Of Names
<br>
<input type="radio" name="Names" value="1{p+100}" id="Names_1" class="NameRad1 trigger textBox1" tabindex="5" required />
One <br>
<input type="radio" name="Names" value="2{p+200}" id="Names_2" class="NameRad2 trigger textBox2" tabindex="6"  />
Two <br>
<input type="radio" name="Names" value="3{p+300}" id="Names_3" class="NameRad3 trigger textBox3" tabindex="7" />
Three <br>
<input type="radio" name="Names" value="4{p+400}" id="Names_4" class="NameRad4 trigger textBox4" tabindex="8" />
Four <br>
</div>
<!--End nameSelection-->
<br>
<!--Begin columnSelection-->
<div class="left eighty center">
Number Of Columns
<br>
<input type="radio" name="Columns" value="1" id="Columns_0" class="ColumnRad1 " tabindex="3" required />
One
<br>
<input type="radio" name="Columns" value="2" id="Columns_1" class="ColumnRad2 " tabindex="4"  />
Two
<br>
</div>
<!--End columnSelection-->
<br>
<!--Begin fontSelection-->
<div class="left eighty center">
<label>Font</label>
<br>
<select id="fontSelect" name="Font" tabindex="2" required>
<option value="" selected="selected" disabled>Choose A Font...</option>
<option value="Arial">Modern</option>
<option value="Times New Roman">Classic</option>
<option value="Impact">Vintage</option>
<option value="Verdana">Retro</option>
</select>
</div>
<!--End fontSelection-->
</div>
<!--End leftSide-->
<!--Begin rightSide-->
<div class="submission">
<div class="signCreatorDiv">
<div class="signMain"></div>
<div class="namesColumn">
<div class="NameImg content" >
<div class="NameTxt1 right test"  >
<input class="test" type="text" name="name #1" id="textBox1" value="" placeholder="Name 1" tabindex="9" />
</div>
</div>
<div class="NameImg content" >
<div class="NameTxt2 right test " >
<input class="test" type="text" name="name #2" id="textBox2" value="" placeholder="Name 2" tabindex="10"  />
</div>
</div>
<div class="NameImg content" >
<div class="NameTxt3 right test"  >
<input class="test" type="text" name="name #3" id="textBox3" value="" placeholder="Name 3" tabindex="11"  />
</div>
</div>
<div class="NameImg content" >
<div class="NameTxt4 right test"  >
<input class="test" type="text" name="name #4" id="textBox4" value="" placeholder="Name 4" tabindex="12"  />
</div>
</div>
</div>
<div class="submitDiv">
<input type="submit" name="x:productsubmit" id="productsubmit" value="Add My Sign" class="submit" tabindex="13"/>
</div>
</div>
</div>
<br>
<br>
<!--End rightSide-->
</div>
</form>
</body>

正如你所看到的，jQuery是相当多余的，我知道我想要它只是说不是语法等我想要：如果选择了单选按钮的NR然后显示并要求＆lt; = textBox indexN并隐藏和取消-require＆gt; textBox indexN

我很感激任何帮助。

感谢阅读！

更新

所以来自用户j08691我得到的代码非常适合我上面的问题页面：

$('input[name="Names"]').click(function () {
var idx = $(this).index(':radio')
$('.namesColumn input:text').hide().prop("required", false);
$('.namesColumn .NameImg.content').show();
$('.namesColumn .NameImg.content:lt(' + (idx + 1) + ') input:text').show().prop("required", true);
})

它完美无缺。： - ）

Answer 1

对于这个具体的例子，一个辅助函数就足够了。类似的东西：

function showHide(idx1, idx2){
    $('div.NameImg.content:lt('+ idx1 +')').show();
    $('div.NameImg.content:gt('+ idx2 +')').hide();
    $('input#textBox.test:lt('+ idx1 +')').attr("required",true);
    $('input#textBox.test:gt('+ idx2 +')').attr("required",false);
}

这样称呼：

$('.NameRad1').click(function(){showHide(1,0)});

演示：http://jsfiddle.net/ysPvd/

但是，如果您知道标记的结构不会改变，那么实际上可以使用元素本身来确定调用函数时要传递的参数。像这样：

$(':radio').click(function(e){
    var idx = $(this).index()
    showHide(idx, idx+1);
});

Answer 2

试试这个：

$('input[name="Names"]').click(function () {
    var idx = $(this).index(':radio')
    $('.namesColumn input:text').hide().prop("required", false);
    $('.namesColumn .NameImg.content').show();
    $('.namesColumn .NameImg.content:lt(' + (idx + 1) + ') input:text').show().prop("required", true);
})

<强> jsFiddle example

请记住，ID必须是唯一的，名称属性不应包含空格。

jQuery浓缩显示多个元素的隐藏脚本

CSS

的jQuery

HTML

更新

2 个答案: