Question

我使用下面的代码来渲染相同的次数，

我有两个部分，一部分是show-all课程，另一部分没有课程。

当'show-all'类不可用时，需要运行countIncrease函数，如果类可用则不需要运行funtcion，

在每个部分都需要检查班级是否可用。

class Grid {
    init() {
        $('.grid').each(function() {
            const $this = $(this);
            // getting values & url from from html
            const dropDownUrlpath = $this.find('.grid__dropdown-select').attr('data-ajaxurl');
            const hasClass = $this.find('.grid').hasClass('grid_showall');
            // countIncrease shows the inital 6 compoents/div and rest of will be hidden
            // onclick it will display 3 components/div
            function countIncrease() {
                let limit = parseInt($this.find('.grid__component').attr('data-initcount'), 10);
                const incrementalCall = parseInt($this.find('.grid__component').attr('data-incrementalcount'), 10);
                $this.find(`.grid__content > .grid__component:gt(' ${limit - 1} ') `).hide();
                if ($this.find('.grid__content > .grid__component').length <= limit) {
                    $this.find('.grid__cta').hide();
                }
                else {
                    $this.find('.grid__cta').show();
                }
                $this.find('.grid__cta').on('click', function(event) {
                    event.preventDefault();
                    limit += incrementalCall;
                    $this.find(`.grid__content > .grid__component:lt(' ${limit} ')`).show();
                    if ($this.find('.grid__content > .grid__component').length <= limit) {
                        $this.find('.grid__cta').hide();
                    }
                });
            }

            if (hasClass.length === true ) {
                console.log('class exist-----'+ hasClass);
                countIncrease();
            }
            // on dropdown change taking the selected dropdown value and adding @end of the url and replacing the previous html
            $this.find('.grid__dropdown-select').on('change', function() {
                const optionValue = this.value;
                $.ajax({
                    url: dropDownUrlpath + optionValue,
                    success(result) {
                        $this.find('.grid__content').html(result);
                        countIncrease();
                    }
                });
            });
        });
    }
}

我写了if条件，但它运行一次并在两个场景中都给出了错误的条件，

if (hasClass.length === true ) {
    console.log('class exist-----'+ hasClass);
    countIncrease();
}

如何处理......？

Answer 1

你不应该在.hasClass中添加一个参数，以便它知道要检查什么吗？

if ( $this.hasClass ('some class') === true ) {
alert('something');
}

或设置if(hasClass.length > 0){}

Answer 2

通过查找父div

将检查类保存在变量中

const hasClass = $this.find('.grid').hasClass('grid_showall');

使用.attr（）方法

获取匹配集中第一个元素的属性值

const classInthis = hasClass.attr('class');

检查条件，

if (classInthis !== 'grid_showall') {
    countIncrease();
}

如果条件需要检查evrytime

2 个答案: