JQuery class vs ID

JQuery class vs ID

本文关键字：ID vs class JQuery      更新时间：2024-03-15

这里有一个foreach循环。对于它打印的每一项，都有一个可扩展/可折叠的评论部分。

我遇到的问题是，当我点击一个项目的"全部展开"时，它会同时展开循环中每个项目的注释。然而，我只想看到对该特定项目的评论。

我知道这与ID和类有关，但我对JQuery没有任何经验。所以请帮忙！

<?php
foreach ($items as $item) {
   echo item['comment'];                                
   echo $item['full_name']; ?>
<div id="listContainer">   
            <div class="listControl">
                <a class="expandList">Expand All</a>
                <a class="collapseList">Collapse All</a>
            </div>
            <ul class="expList">
                <li>Item A
                    <ul>
                        <li>Item A.1
                            <ul>
                                <li><span>fidjis</span></li>
                            </ul>
                        </li>
                        <li>Item A.2</li>
                        <li>Item A.3
                            <ul>
                                <li><span>iejowejfiojwiefj.</span></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>Item B</li>
                <li>Item C
                    <ul>
                        <li>Item C.1</li>
                        <li>Item C.2
                            <ul>
                                <li><span>sdfkjksdjfnjkdsfnjn</span></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
<?php
        }
        ?>

这是Jquery：

function prepareList() {
    $('.expList').find('li:has(ul)')
    .click( function(event) {
        if (this == event.target) {
            $(this).toggleClass('expanded');
            $(this).children('ul').toggle('medium');
        }
        return false;
    })
    .addClass('collapsed')
    .children('ul').hide();
    //Create the button functionality
    $('.expandList')
    .unbind('click')
    .click( function() {
        $('.collapsed').addClass('expanded');
        $('.collapsed').children().show('medium');
    })
    $('.collapseList')
    .unbind('click')
    .click( function() {
        $('.collapsed').removeClass('expanded');
        $('.collapsed').children().hide('medium');
    })
};

您在循环的每次迭代中都创建ID为"listContainer"的div，这是无效的。ID只能使用一次。建议将Id="listContainer"更改为class="listContainer"

对于jQuery，问题在于您引用的是具有"collapsed"类的所有元素，而不仅仅是与"全部展开"按钮相关的容器中的元素。

我还没有测试过，但你会想要一些类似的东西

//Create the button functionality
$('.expandList')
.unbind('click')
.click( function() {
    $(this).parents('.listContainer').find('.collapsed').addClass('expanded');
    $(this).parents('.listContainer').find('.collapsed').children().show('medium');
})
$('.collapseList')
.unbind('click')
.click( function() {
    $(this).parents('.listContainer').find('.collapsed').removeClass('expanded');
    $(this).parents('.listContainer').find('.collapsed').children().hide('medium');
})

这里的区别在于，您从单击的按钮开始，并使用"listContainer"类进行div，然后从那里向下查找所有的".folded"元素。

首先应该将listContainer更改为class属性。

因为ID必须是唯一的。

function prepareList() {
    $('.expList').find('li:has(ul)')
        .click( function(event) {
            if (this == event.target) {
                $(this).toggleClass('expanded');
                $(this).children('ul').toggle('medium');
            }
            return false;
        })
        .addClass('collapsed')
        .children('ul').hide();
    //Create the button functionality
    $('.expandList')
        .unbind('click')
        .click( function() {
            // walk up the tree from the clicked button 
            // and find the parent .listContainer
            var $list = $(this).parents(".listContainer");
            // find .collapsed in .listContainer
            $list.find('.collapsed').addClass('expanded');
            $list.find('.collapsed').children().show('medium');
        });
    $('.collapseList')
        .unbind('click')
        .click( function() {
            // walk up the tree from the clicked button 
            // and find the parent .listContainer
            var $list = $(this).parents(".listContainer");
            // find .collapsed in .listContainer
            $list.find('.collapsed').removeClass('expanded');
            $list.find('.collapsed').children().hide('medium');
        });
};

我认为您正在使用类来代替ID。ID用于标识单个元素，而一个类可以应用于不止一个元素。访问单个元素时，请尝试在jQuery调用中使用ID。你可以试试这样的东西：

?>
<div id="listContainer">   
        <div class="listControl">
            <a class="expandList">Expand All</a>
            <a class="collapseList">Collapse All</a>
        </div>
        <ul id="list1" class="expList">
            <li>
                Item A
                <ul>
                    <li>
                        Item A.1
                        <ul>
                            <li>
                                <span>fidjisjfisdjfisdjifjsidfj.</span>
                            </li>
                        </ul>
                    </li>
                    <li>
                        Item A.2
                    </li>
                    <li>
                        Item A.3
                        <ul>
                            <li>
                                <span>iejowejfiojwiefj.</span>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                Item B
            </li>
            <li>
                Item C
                <ul>
                    <li>
                        Item C.1
                    </li>
                    <li>
                        Item C.2
                        <ul>
                            <li>
                                <span> sdfkjksdjfnjkdsfnjn. </span>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
<?php
    }
    ?>

你的jQuery会有点像

function prepareList() {
$('#list1').find('li:has(ul)')
.click( function(event) {
    if (this == event.target) {
        $(this).toggleClass('expanded');
        $(this).children('ul').toggle('medium');
    }
    return false;
})
.addClass('collapsed')
.children('ul').hide();
//Create the button functionality
$('.expandList')
.unbind('click')
.click( function() {
    $('.collapsed').addClass('expanded');
    $('.collapsed').children().show('medium');
})
$('.collapseList')
.unbind('click')
.click( function() {
    $('.collapsed').removeClass('expanded');
    $('.collapsed').children().hide('medium');
})

}；

相关文章：