私は、magento ストアの 1 つで「SKU による注文」システムを開発しています。これは、必要な SKU と数量を簡単に入力するだけです。
次の機能を使用して、そこに「別の sku を追加」オプションを追加しました。
function adicionarCampos(){
var str = $('tabs-wrapper-cod').insert( '<div class="enc-cod-tab"><span class="enc_cod_02_home">Código: <input type="text" name="cod[]" value="" class="form_carrinho_cod required-entry" /></span><span class="enc_cod_04_home">Qt: <input type="text" name="qt[]" value="" class="form_carrinho_qt required-entry validate-number" /></span></div>' );
}
この機能は、ユーザーが別の SKU を入力するための別の「タブ」を追加します。参照用のメインファイルは次のとおりです。
<div id="enc-cod-conteudo" title="Encomendar por código">
<div class="enc-por-codigo">
<p class="sub-enc-cod">Nunca foi tão simples encomendar por código!</p>
<div class="quick-order">
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="POST">
<div id="tabs-wrapper-cod">
<div class="enc-cod-tab"><span class="enc_cod_02_home">Código: <input type="text" name="cod[]" value="" class="form_carrinho_cod required-entry" /></span><span class="enc_cod_04_home">Qt: <input type="text" name="qt[]" value="" class="form_carrinho_qt required-entry validate-number" /></span></div
</div>
</div>
<div class="actions_carrinho">
<div class="adicionar-cod" onclick="adicionarCampos();"><span>Adicionar código</span></div>
<button style="padding-left: 6px;" type="submit" title="Adicionar" class="button btn-update"><span><span>Adicionar ao carrinho</span></span></button>
</div>
</form>
</div>
</div>
</div>
ご覧のとおり、追加された入力には同じ ID "sku" が割り当てられます。ここでわかるように、検証スクリプトが探しているものは次のとおりです。
jQuery(document).ready(function(){
jQuery('#sku').keyup(sku_check);
});
function sku_check(){
var sku = jQuery('#sku').val();
if(sku == "" || sku.length < 7){
jQuery('#sku').css('border', '1px #CCC solid');
jQuery('#tick').hide();
jQuery('#nome_do_produto').hide();
} else {
jQuery.ajax({
type: "POST",
url: "scripts/verificar_cod.php",
data: 'sku='+ sku,
cache: false,
success: function(response){
if(response.length > 0){
console.log(response);
jQuery('#sku').css('border', '1px #090 solid');
jQuery('#tick').fadeIn();
jQuery('#cross').hide();
jQuery('#nome_do_produto').html(response);
jQuery('#nome_do_produto').fadeIn();
jQuery('#codigo_inexistente').hide();
} else {
jQuery('#sku').css('border', '1px #C33 solid');
jQuery('#cross').fadeIn();
jQuery('#tick').hide();
jQuery('#nome_do_produto').hide();
jQuery('#codigo_inexistente').fadeIn();
}
}
});
}
}
これが正しい方法ではないことはわかっていますが (ID は本質的に一意である必要があります)、いわば JavaScript は私の「ビーチ」ではなく、追加入力に一意の ID を与える方法に行き詰まっています。さらに、検証スクリプトは、増分されたすべての ID を探す必要があります。
私の質問は、そのような問題にアプローチする最善の方法は何ですか? JavaScriptを介してインクリメントを検討する必要がありますか? もしそうなら、どのように?