Question

最近我不太喜欢jQuery，尝试了多种解决方案后无法解决以下问题：

我有一些内部div，它用作按钮。按下按钮div时，它应该获得css active类，并且应该删除其他按钮上的active类。 active类很简单，使按钮突出显示。

到目前为止，我想到的jQuery的一部分是基于一个帖子的，该帖子是一些Semantic-ui按钮的示例（我也在使用Semantic-Ui）。但是，这不适用于我的特定情况。

到目前为止，我要介绍的部分如下：

button = {};

    // ready event
    button.ready = function () {

        // selector cache
        var
            $buttons = $('.topOrders');

            // alias
            handler = {
                activate: function () {
                    $(this)
                        .addClass('active')
                        .siblings()
                        .removeClass('active')
                        ;
                }
            };

        $buttons
            .on('click', handler.activate);

    };


    // attach ready event
    $(document)
        .ready(button.ready);

HTML如下：

<div class="topOrders">
    <div class="vertical">
        <div class="ui button right labeled" tabindex="0">
            <div class="opsOrder ui button right pointing label">
                <i class="file alternate icon"></i> Test
            </div>
            <a class="ui basic label">
                1234
            </a>
        </div>
    </div>
    <div class="vertical">
        <div class="ui button right labeled" tabindex="0">
            <div class="opsOrder ui button right pointing label">
                <i class="file alternate icon"></i> Test
            </div>
            <a class="ui basic label">
                1234
            </a>
        </div>
    </div>
</div>

但是jQuery代码将活动类添加到容器类topOrders中。

按钮实际上是按钮div's，按钮旁边还带有标签，实际的按钮是此部分：

<div class="opsOrder ui button right pointing label">
    <i class="file alternate icon"></i> Test
</div>

我尝试了

if ($('.topOrders').hasClass('opsOrder')) {
    //.addClass logic
}

和

.closest('.opsOrder').addClass('active')

Answer 1

jQuery将添加到容器类topOrders中，因为这就是您将事件处理程序与$buttons = $('.topOrders');绑定在一起的原因。

因此，如果您希望事件处理程序仅在按钮的标签部分上起作用，则应该对选择器更加具体。例如，您可以按多个类进行选择以获取内部div $buttons = $('.button.label');。

如果要在外部topOrders div上使用事件处理程序，但只希望按钮更改类。您需要更改activate函数，而不是将$(this)定位为$('.button.label')

使用jQuery将类添加到单击（嵌套）的div元素中

1 个答案: