更改li元素列表的类

My Spy 发表于 Dev

我的间谍

我试图将带有类的li的类名更改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();

            }
        }

亚历山大·魏玛迈尔（Alexander Weihmayer）

像这样吗？用纯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更改了一些类名

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。