javascript - 获取值并将其传递给按钮

Question

我需要将input.number值传递给div.add中button的属性data-quantity 。
我还需要同一按钮的属性data-color的select#color值。

有人可以帮我吗？

<div class="col-m">
    <a href="#" data-toggle="modal" data-target="#myModal1" class="offer-img">
        <img src="images/Long-Sleeve-Shirt.jpg" class="img-responsive" alt="">
        <div class="offer">
            <p><span>Offer</span></p>
        </div>
    </a>
    <div class="mid-1">
        <div class="women">
            <h6><a href="single.html">Men's Marty Chambray Long-Sleeve Shirt</a></h6>
        </div>
        <div class="mid-2">
            <p>
                <label>$14.00</label><em class="item_price">$12.50</em>
            </p>
            <div class="block">
                <div class="starbox small ghosting"></div>
            </div>
            <div class="clearfix"></div>
        </div>

        <select id="color">
            <option value="red" onclick="color(this.value)">Red</option>
            <option value="blue">blue</option>
        </select>
        <input type="number" name="quantity" id="quantity"></input>
        <div class="add">
            <button class="btn btn-danger my-cart-btn my-cart-b " data-id="1" data-name="Levi's Men's Marty Chambray Long-Sleeve Shirt" data-summary="summary 1" data-price="12.50" data-quantity="2" data-color="Blue" data-image="images/Long-Sleeve-Shirt.jpg">Add to Cart</button>
        </div>
    </div>
</div>

Answer 1

既然你有Bootstrap classes在您的代码中，我假设您也有 jQuery，那么您可以开始查看以下内容来执行您想要的操作:

// Triggers when the input value changes in any way
$('input#quantity').on('input',function() {
    // Gets the input value
    var value = $(this).val();

    // This is how to change an element data-attribute
    $('div.class > button').data("quantity", value);
});

参见.on('input') jQuery 事件和两者.attr()和 .data() jQuery 方法以获取更多信息。

<小时/>要更改 data-color 属性，效果完全相同:

// Triggers when you select an option
$('select#color').change(function() {
    // Gets the current select value
    var value = $(this).val();

    // Now you just need to change the data-color attribute
    // but you already know how to do it
});

参见.change() jQuery 事件以获取更多信息。