javascript - Jquery .val() 通过按下按钮改变变量值

Question

我想通过触摸按钮传递 Jquery 中的限制值。我几乎找到了解决方案，但不太明白。如何将值设置为“limit:”默认值并通过按按钮更改它。

HTML

<button id="pagelimit default">1</button>
<button id="pagelimit">2</button>
<button id="pagelimit">3</button>

</div>

JS

function displayVals() {
var pagelim = $( "#pagelimit" ).val();
};

$('#product-grid').mixItUp({
pagination: {
    limit: $pagelim // insert button value
}
});

请帮我解决这个问题。

Answer 1

元素的 ID 必须是唯一的...看起来您想使用单击的按钮的文本更新 limit 选项

<button class="pagelimit default">1</button>
<button class="pagelimit">2</button>
<button class="pagelimit">3</button>

然后

//this method is not used in the below code as we don't know which button was clicked here... if you share how the `displayVals` method is called then we can try to make this work
function displayVals() {
    var pagelim = $("#pagelimit").val();
};

jQuery(function ($) {
    $('.pagelimit').click(function () {
        //update the limit option
        $('#product-grid').mixItUp('setOptions', {
            limit: +$(this).text()
        });
    });

    //initialize the plugin
    $('#product-grid').mixItUp({
        pagination: {
            limit: 1
        }
    });
})