これは JQuery の質問というよりも CSS の質問ですが、両方が含まれています。
繰り返し可能なフィールドをフォームに追加しようとしています...これまでのところ、CSSを除いてすべてうまくいきます...
繰り返し可能なフィールドの HTML:
<a class="repeatable-add top-link tooltip-link" href="#" rel="tooltip" data-placement="top" data-original-title="Add a new Address Field">
<i class="icon-plus-sign"></i>
</a>
<div class="controls" id="GMAddresses">
<ul id="GMAddress-repeatable" class="custom_repeatable" style="list-style:none;margin-left:0;">
<li>
<div class="input-prepend input-append" style="margin-left:1%;margin-top:2%;">
<span class="add-on"><i class="icon-home"></i> <a class="repeatable-up" href="#"><i class="icon-arrow-up"></i></a></span>
<input type="text" name="GMAddress[0]" style="width:85%;" placeholder="Address Here" required>
<span class="add-on"><a class="repeatable-down" href="#"><i class="icon-arrow-down"></i></a> <a class="repeatable-remove" href="#"><i class="icon-minus-sign"></i></a></span>
</div>
</li>
</ul>
</div>
Repeatable Add ボタンの JQuery:
//Repeatable Add Button
$('.repeatable-add').click(function() {
//Check if there is any open address fields
var e_error = new Boolean;
e_error = false;
$('ul.custom_repeatable').each(function() {
$(this).find('li').each(function() {
var mytext = "";
mytext = $(this).find('input[type=text]').val();
if(mytext === "") {
e_error = true;
return false;
}
});
});
//Check if the max (7) number of addresses has been reached
if($('ul.custom_repeatable li').length < 7) {
if(e_error === false) {
//Add the extra field if there are no errors
field = $(this).closest('div').find('.custom_repeatable li:last').clone(true);
fieldLocation = $(this).closest('div').find('.custom_repeatable li:last');
$('input', field).val('').attr('name', function(index, name) {
return name.replace(/(\d+)/, function(fullMatch, n) {
return Number(n) + 1;
});
})
field.insertAfter(fieldLocation, $(this).closest('div')).hide().show('slow');
$('ul.custom_repeatable li:last input').focus();
return false;
} else {
//Show popup if there was an open address field
$('#extra_address_error2').popover('show');
setTimeout(function() {
$('#extra_address_error2').popover('hide');
}, 5000);
$('ul.custom_repeatable li:last input').focus();
}
} else {
//Show popup if max (7) number of addresses has been reached
$('#extra_address_error1').popover('show');
setTimeout(function() {
$('#extra_address_error1').popover('hide');
}, 5000);
}
});
繰り返し可能な上下ボタンを除いて、これは正常に機能します...これらのボタンを使用すると、ユーザーは必要に応じてフィールドを上下に移動できますが、最初のフィールドに上ボタンを表示したり、下ボタンを表示したりしないでください。最後のフィールドで…
これは私が使用したCSSです：
ul.custom_repeatable > li:first-child .repeatable-up {
visibility: hidden;
clear:both;
}
ul.custom_repeatable > li:last-child .repeatable-down {
visibility: hidden;
clear:both;
}
[追加] ボタンを使用して新しいフィールドを追加するまで、CSS は正常に機能します...その後、[繰り返し可能な下へ] ボタンが新しいフィールドに表示されません...
JQueryでフィールドを更新/並べ替えると、CSSは両方のボタンで機能します...
助けてください...
ありがとう！