Question

我在使用一些JS代码时遇到了一些问题，这些代码用于检查用户选择相互衡量的产品。

我们用函数.length来计算类'measure-active'并且一切正常，但是最近我们以jQuery的形式引入了分页和过滤器，因为这打破了能够相互测量产品的功能当您点击其他页面或过滤器时，产品会重新加载，而您之前点击测量的产品现在不再“有效”了。

这是我们的代码：

var linkstart = '/';
var link1 = '';
var link2 = '';
var first;
var second;
var check;
$('input[class="measure-button"]').on('change', function (e) {
    var active = $('input.measure-active').length;
    if($(this).hasClass('measure-active')) { 
        $('input[class="measure-button"]').attr('disabled', false);
        $(this).removeClass('measure-active');
        $('#measure-button').addClass('measure-button-disabled');
        $('#measure-button').attr('href', '#');
        $('#measure-button-two').addClass('measure-button-disabled');
        $('#measure-button-two').attr('href', '#');
        $('.measure-activate').removeClass('shown');
        $('.measure-block').removeClass('measure-inactive');
        //check if this is the first product highlighted, if so do below
        if($(this).data('name') === first) {
            link1 = link2;
            check = 1;
        } else {
            check = 0;
        }
    }
    else if(active == 1) {
        $('input[class="measure-button"]').attr('disabled', true);
        $(this).attr('disabled', false);
        $(this).toggleClass('measure-active');
        $('#measure-button').removeClass('measure-button-disabled');
        $('#measure-button-two').removeClass('measure-button-disabled');
        $('.measure-activate').addClass('shown');
        link2 = $(this).data('company')+'/'+$(this).data('name');
        $('#measure-button').attr('href', linkstart+link1+'/versus/'+link2);
        $('#measure-button-two').attr('href', linkstart+link1+'/versus/'+link2);
        //first = second
        if(check == 1) {
            first = second;
        }
        second = $(this).data('name');
        //dim all other products
        $('.measure-block').addClass('measure-inactive');
    } else if(active != 2) {
        $(this).toggleClass('measure-active');
        $('#measure-button').addClass('measure-button-disabled');
        $('#measure-button-two').addClass('measure-button-disabled');
        $('.measure-activate').removeClass('shown');
        link1 = $(this).data('company')+'/'+$(this).data('name');
        $('#measure-button').attr('href', '#');
        $('#measure-button-two').attr('href', '#');
        first = $(this).data('name');
        $('.measure-block').removeClass('measure-inactive');
    }
    else {
        $(this).removeClass('measure-active');
    }
});

关于如何规避这个问题的任何想法？

Answer 1

我修改了这个：

$('input[class="measure-button"]').on('change', function (e) {

到

$('body').on('change', 'input[class="measure-button"]', function (e) {

而不是使用.length计算，只需添加一个每次点击测量按钮时计数的变量。

jQuery分页和计算某些div

1 个答案: