JQuery конденсировать шоу скрыть сценарий для нескольких элементов
О, чувак, я полностью облажался с моим последним вопросом... должно быть, это было сонный или что-то в этом роде:-) Давайте попробуем это снова.
Я 20-летний ветеринар HTML, который никогда не делал много JavaScript и т. Д., Но нашел потребность в течение многих лет. Мой код очень прост и в основном вырезан и вставлен, а затем измени его, чтобы он работал:-)
Я создаю сайт, где вы можете выбрать количество текстовых полей с переключателями. Выбранные текстовые поля отображаются и требуются динамически, а остальные явно скрыты и не требуются, поэтому пользователь может выбрать, скажем, 3 имени, а затем 2 имени, а третье имя и выше не будут блокировать отправку из-за отмены требования.
То, что у меня сейчас работает, но по меньшей мере глупо. Я вызываю изменения по клику для отображения, скрытия, обязательного = истинного и обязательного = ложного для всех элементов И для каждого переключателя. слишком много кода!
Мне бы хотелось несколько советов по превращению этого в 1 фрагмент кода, который обрабатывает все... в любом случае, код!
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 довольно избыточен, и я знаю, что я хочу, чтобы он говорил, а не синтаксис и т. Д. Я хочу: если выбран indexN переключателей, то показать и потребовать <=textBox indexN и скрыть и не требовать>textBox indexN
Буду признателен за любую помощь.
Спасибо за прочтение!
ОБНОВИТЬ
Итак, от пользователя j08691 я получил этот код, который идеально подходит для проблемы выше на 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);
})
это работает отлично.:-)
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);
})
И помните, что идентификаторы должны быть уникальными, а атрибуты имени не должны содержать пробелов.
Для этого конкретного примера достаточно одной вспомогательной функции. Что-то вроде:
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);
});