Question

我有以下html：

<div class="profileRowHeader"><!-- div 1 -->
    <div class="folderIcon">
        <i class="glyphicon glyphicon-arrow-close"></i>
    </div>
</div>

<div class="profileRowHeader"><!-- div 2 -->
    <div class="folderIcon">
        <i class="glyphicon glyphicon-folder-open"></i>
    </div>
</div>

<div class="profileRowHeader"><!-- div 3 -->
    <div class="folderIcon">
        <i class="glyphicon glyphicon-folder-close"></i>
    </div>
</div>

当我点击带有.profileRowHeader类的元素时，它会执行一些操作并将图标文件夹从关闭更改为打开。如上面的中间div。

$this.find(".folderIcon").toggleClass('glyphicon-folder-open glyphicon-folder-close');

效果很好。现在，如果我点击上面的div 3，div 2仍然有图标文件夹打开，所以为了解决这个问题，只要点击profileHeaderRow，我就会关闭所有文件夹图标。

$(".folderIcon").removeClass('glyphicon-folder-open').addClass('glyphicon-folder-close');

问题当然是我正在使用toggleClass，因此我点击的div中的图标将关闭，然后将再次打开它。

所以，我可以以某种方式找到我点击的div中的类folderIcon，而不是将类更改应用于它。希望这是有道理的。

这就是我正在尝试但却根本不起作用：

$(".folderIcon").not(find(".folderIcon")).removeClass('glyphicon-folder-open').removeClass('greenDragBg').addClass('glyphicon-folder-close');

完整代码原样：

$('.profileRowHeader').click(function() {

        $(".folderIcon").not(find(".folderIcon")).removeClass('glyphicon-folder-open').addClass('glyphicon-folder-close');

        $this.find(".folderIcon").toggleClass('glyphicon-folder-open glyphicon-folder-close');

    });

摘要：我有x个div，其中每个类profileRowHeader都是一个文件夹图标，全部关闭...当我点击任何带有类{{的div时1}}我希望该图标变为开放状态，其余图标将关闭。当我再次单击该div时，它会变为关闭图标。但是，如果它处于打开状态并且单击了另一个div，则应关闭打开的div，并且新profileRowHeader中的新文件夹图标将变为打开状态。

希望有点清楚

Answer 1

这就是点击元素中find元素的方式：

$(".folderIcon").not( $(this).find(".folderIcon") ) //...

或稍短的版本为选择器设置context：

$(".folderIcon").not( $(".folderIcon", this) ) //...

Answer 2

$('.profileRowHeader').click(function () {
    // reset state of all icons back to closed
    $('.glyphicon').removeClass('glyphicon-folder-open').addClass('glyphicon-folder-close');    

    $('.glyphicon').find(':first').toggleClass('glyphicon-folder-close glyphicon-folder-open');
});

JQuery .not（find（））或 - 可以使用吗？

2 个答案: