Question

我尝试将类each_feature的类名更改为each_feature - display。每次点击加载更多我需要更改ul中的下一个3 li的类。

但是下面的javascript对我不起作用。在加载时我调用了load_more.display_items（），这也没有用。

有人请帮助我完成这项工作

   <div class="export">
        <section class="container">
            <h2> Components Identified by scanner</h2>
             <ul class="components_features">
                <li class="each_feature">
                    <a href="//Nginx.com" target="_blank" title="Nginx" >
                        <h2 class="tech_name">
                            Nginx
                        </h2>
                        </a>
                        <div class="octo">
                            <div class="octo1">
                        <img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
                        </div>
                    </div>
                </li>
                <li class="each_feature">
                    <a href="//Nginx.com" target="_blank" title="Nginx" >
                        <h2 class="tech_name">
                            Nginx
                        </h2>
                        </a>
                        <div class="octo">
                            <div class="octo1">
                        <img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
                        </div>
                    </div>
                </li>
                <li class="each_feature">
                    <a href="//Nginx.com" target="_blank" title="Nginx" >
                        <h2 class="tech_name">
                            Nginx
                        </h2>
                        </a>
                        <div class="octo">
                            <div class="octo1">
                        <img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
                        </div>
                    </div>
                </li>
                <li class="each_feature">
                    <a href="//Nginx.com" target="_blank" title="Nginx" >
                        <h2 class="tech_name">
                            Nginx
                        </h2>
                        </a>
                        <div class="octo">
                            <div class="octo1">
                        <img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
                        </div>
                    </div>
                </li>
                <li class="each_feature">
                    <a href="//Nginx.com" target="_blank" title="Nginx" >
                        <h2 class="tech_name">
                            Nginx
                        </h2>
                        </a>
                        <div class="octo">
                            <div class="octo1">
                        <img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
                        </div>
                    </div>
                </li>
                <li class="each_feature">
                    <a href="//Nginx.com" target="_blank" title="Nginx" >
                        <h2 class="tech_name">
                            Nginx
                        </h2>
                        </a>
                        <div class="octo">
                            <div class="octo1">
                        <img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
                        </div>
                    </div>
                </li>
                <a class="link" onclick="load_more.show_more_items()">
                    <span >Load more ...</span>
                </a>
                <hr>
        </section>
    </div>

使用Javascript：

 var load_more = {
            el: $('.export .components_features'),
            list_index: 3,
            display_items: function() {
                if((this.list_index + 3) > this.el.find('.each_feature').length) {
                    this.el.find('.each_feature').addClass('each_feature--display');


                }

                this.el.find('.each_feature:lt(' + this.list_index + ')').addClass('each_feature--display');
            },
            show_more_items: function() {
                this.list_index += 3;

                this.display_items();

            }
        }

Answer 1

这样的东西？纯JS制造。对于a标记，如果要放置href，则可能需要阻止默认链接操作。

<html>
<head>
<style>
    .feature{
        display: none;
    }
</style>
<script>
    function loadMore(){
        features = document.getElementsByClassName("feature");

        if(features.length > 0){
            var count = 0;

            while(features.length && count < 3){
                count++;
                features[0].className = "featureDisplay";
            }
        }
    }
</script>
</head>
<body>
    <ul>
        <li class="feature">
            1
        </li>
        <li class="feature">
            2
        </li>
        <li class="feature">
            3
        </li>
        <li class="feature">
            4
        </li>
        <li class="feature">
            5
        </li>
        <li class="feature">
            6
        </li>
        <a onclick="loadMore()">Load more ...</a>
    </ul>
</body>
</html>

使用for循环的问题是返回的值是一个节点列表列表，它是一个活动对象，当你修改一个类时它会弄乱数组。在此处阅读更多相关信息：javascript changes one some class names

Answer 2

关于'加载更多'做这个

            $(".each_feature").addClass('each_feature--display');
            $(".each_feature--display").removeClass('each_feature');

当然你必须调整代码

更改li元素列表的类

2 个答案: