0

我有一个使用 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>";
?>

I've tried this: but i think i would need a code for it to change the button data when the value for the select input is changed

<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>
4

2 回答 2

0

对于设置元素的-properties， jquery中data有一个特殊的功能：.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 );
    } );
} );

请注意，这size将color是数据属性。这意味着在您的按钮中，它们将如下所示：

<button data-item-description='$description'  data-color='blue' data-size='XL'>
于 2017-01-18T07:13:31.390 回答
0

您的要求只能通过一些客户端脚本语言（如 JS 或 Jquery）来实现，例如：

html:

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

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

查询：

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

工作小提琴

更新小提琴

注意：不要忘记包含 jquery 库

于 2017-01-18T06:54:14.770 回答