0

現在、ソール、カラー、ライニング、タンの 4 つのセクションがあります。各セクションには、マテリアルを選択するオプションがあります。以下のコードは、2 つのセクションの例です。

<div class="sole_panel container active">
    <h3>sole</h3>
    <div id="sole_leather" class="material-btn">leather</div>
    <div id="sole_suade" class="material-btn">suade</div>
    <div id="sole_nubuck" class="material-btn">nubuck</div>
</div>
<div class="collar_panel container">
    <h3>collar</h3>
    <div id="collar_leather" class="material-btn">leather</div>
    <div id="collar_suade" class="material-btn">suade</div>
    <div id="collar_nubuck" class="material-btn">nubuck</div>
</div>

div をクリックすると、id が取得され、非表示の入力タグの値に渡されるように div を作成しました。

<input id="sole" class="material-value" type="hidden" value="sole_leather">

私が抱えている問題は、たとえば、ソールセクションに革を選択すると、以下のコードのように 4 つの非表示の入力がすべて入力されることです。非表示の入力を関連するセクションにのみ適用する簡単な方法はありますか?

<div class="sole_panel container active"></div>
<input id="sole" class="material-value" type="hidden" value="sole_leather">
<div class="collar_panel container"></div>
<input id="collar" class="material-value" type="hidden" value="sole_leather">
<div class="lining_panel container"></div>
<input id="lining" class="material-value" type="hidden" value="sole_leather">
<div class="tongue_panel container"></div>
<input id="tongue" class="material-value" type="hidden" value="sole_leather">

また、JavaScript を使用して、パネルとマテリアルの配列をループ処理しています

panelArray     = ['sole','collar','lining','tongue'];
materialArray  = ['leather','suade','nubuck'];

//loop over array to create selectors
for (x = 0; x < panelArray.length; x++) {

    mtr = '';
    clr = '';               
    var segments = panelArray[x];

    //loop over materials 
    for (y = 0; y < materialArray.length; y++) {

        var material = materialArray[y];
        //console.log(material);

        mtr += '<div class="material-btn" id="' + segments + '_' + material + '">' + material + '</div>';
    }                 

    container += '<div class="' + segments + '_panel container"><h3>' + segments + '</h3>';
    container +=        mtr;
    container +=   '<div class="colour-container">';
    container +=        clr;
    container +=   '</div>';
    container += '</div>';
    container += '<input id="' + segments + '" class="material-value" type="hidden">';

}

以下は、非表示フィールドに値を渡すコードです

$('.material-btn').on('click', function() {              

    $('.material-btn').removeClass('select');
    $(this).addClass('select');

    // passes material type selction to hidden field
    var value = $(this).attr('id');    
    var result = $('.material-value').attr('value', value);
    //console.log(result);
});
4

3 に答える 3

0

別の属性を追加できます: data-segment

mtr += '<div class="material-btn" id="' + segments + '_' + material + '" data-segment="' + segments + '">' + material + '</div>';

そして、あなたは使用することができます

var value = $(this).attr('id');    
var result = $($(this).data('segment')).attr('value', value);

正しい入力フィールドを選択するには

于 2015-05-04T19:55:16.533 に答える