Question

現在サイズやカラーセレクタが内蔵されていないsnipcartを使用している服装のウェブサイトがありますので、送信する内容を知るために説明に入れてください。とにかく、私はボタンのデータにエコーされる色とサイズの選択値が必要です。

これは私のコードです：

<?php 
    echo"<h4 class='ct3'>COLOR</h4> 
<select id='color' name='color'> 
$colorsHTML; 
</select> 

<h4 class='ct3'>SIZE</h4> 
<select name='size' id='size'> 
$sizesHTML; 
</select> 

<br> 
<br> 
<button 
    class='snipcart-add-item list-group-item ct3 add_to_cart' style='background-color: black; color: white;' 
    data-item-id='2' 
    data-item-name='$name' 
    data-item-price='$price' 
    data-item-weight='0' 
    data-item-url='' 
    data-item-image='$image' 
    data-item-description='$description'> 
     ADD TO CART 
</button>"; 
?> 

私はそれがこのようになりますので、ボタンのデータにエコーされるように色とサイズを必要とする：

<?php 
echo"<h4 class='ct3'>COLOR</h4> 
    <select id='color' name='color'> 
    $colorsHTML; 
    </select> 

    <h4 class='ct3'>SIZE</h4> 
    <select name='size' id='size'> 
    $sizesHTML; 
    </select> 

    <br> 
    <br> 
    <button 
     class='snipcart-add-item list-group-item ct3 add_to_cart' style='background-color: black; color: white;' 
     data-item-id='2' 
     data-item-name='$name' 
     data-item-price='$price' 
     data-item-weight='0' 
     data-item-url='' 
     data-item-image='$image' 
     data-item-description='$description COLOR=blue SIZE=XL'> 
      ADD TO CART 
    </button>"; 
?> 

私はこれを試してみた： しかし、私はそれが選択入力の値が変更されたときにボタンのデータを変更するためのコードが必要と思います

<button 
    class='snipcart-add-item list-group-item ct3 add_to_cart' style='background-color: black; color: white;' 
    data-item-id='2' 
    data-item-name='$name' 
    data-item-price='$price' 
    data-item-weight='0' 
    data-item-url='' 
    data-item-image='$image' 
    data-item-description='$description COLOR = <script type='text/javascript'> 
    $('#color').select(function() { 
     var model=$('#color').val(); 
     alert(model); 
    });</script> SIZE = <script type='text/javascript'> 
    $('#size').select(function() { 
     var model=$('#size').val(); 
     alert(model); 
    }); 
</script>'> 
     ADD TO CART 
</button> 

Answer 1

あなたの要件は唯一のJSやjQueryのようないくつかのクライアント側のスクリプト言語によって達成することができるように：

HTML：

<select id="size"> 
    <option value="small">Small</option> 
    <option value="large">Large</option> 
</select> 

<div id="response"> 
</div> 

のjQuery：

$(document).ready(function(){ 
    $('#size').change(function(){ 
    $('#response').html($(this).val()); 
    // $('#response').attr('data-item-description', $(this).val()); 
    }); 
}); 

Working Fiddle

Updated Fiddle

注：sizeとcolorはDATA-なること

$(document).ready(function() { 

    $("#size").change(function() { 
     // get value of a selected option 
     var val = $(this).val(); 
     // set data-attribute of a button 
     $("button").data("color", val); 
    }); 

    $("#color").change(function() { 
     // get value of a selected option 
     var val = $(this).val(); 
     // set data-attribute of a button 
     $("button").data("size", val); 
    }); 
}); 

注：はjqueryの中で特別な.data()機能があります要素のdata -propertiesを設定するためにjQueryライブラリ

Answer 2

を含めることを忘れないでください。属性。つまり、あなたのボタンでは次のようになります：

<button data-item-description='$description' data-color='blue' data-size='XL'>