jQuery在单击合并时切换多个类元素

时间:2018-10-09 18:33:59

标签: jquery onclick toggle show-hide togglebutton

如您所见。点击时有3个显示隐藏切换。

void inorder(struct node *root) //print inorder
{
    if(root->lc!=NULL)
        inorder(root->lc);
    printf("%d ",root->data);
    if(root->rc!=NULL)
        inorder(root->rc);
}
struct node *insert(struct node *T,int x) //code for insertion of a node
{
    if(T==NULL)
    {
        T=(struct node*)malloc(sizeof(struct node));
        T->data=x;
        T->lc=NULL;
        T->rc=NULL;
    }
    else
    {
        if(x > T->data)        
        {
            T->rc=insert(T->rc,x);
            if(BF(T)==-2)
                if(x>T->rc->data)
                    T=RR(T);
                else
                    T=RL(T);
        }
        else
        {
            if(x<T->data)
            {
                T->lc=insert(T->lc,x);
                if(BF(T)==2)
                    if(x < T->lc->data)
                        T=LL(T);
                    else
                        T=LR(T);
            }
        }
        T->ht=height(T);
        return(T);
    }
}

int main()
{
    struct node *root=NULL;
    int ele;
    char ch;
    do
    {
        printf("\n Enter the value to be inserted in AVL: ");
        scanf("%d",&ele);
        root=insert(root,ele);
        printf("\n Want to insert more elements? (y/n): ");
        getchar();
        scanf("%c",&ch);
    }while(ch=='y' || ch=='Y');
    printf("\n Press any key to print inorder traversal: ");
    getchar();
    inorder(root);
    return 0;
}

我的问题,可以通过组合jquery切换多类使此代码更简单,因此,如果需要创建更多的切换按钮,我们将不再需要添加新查询。谢谢。

<button id="btn-hide" class="btn-toggle">Hide</button>
<button id="btn-show" class="btn-toggle">Show</button>

<button id="btn-hide" class="btn-toggle-2">Hide2</button>
<button id="btn-show" class="btn-toggle-2">Two</button>

<button id="btn-hide" class="btn-toggle-3">Hide3</button>
<button id="btn-show" class="btn-toggle-3">Three</button>

#btn-show {
    display: none;
}

1 个答案:

答案 0 :(得分:0)

将每对按钮包装在一个格中。

HTML:

    <div class="tgl">
        <button id="btn-hide" class="btn-toggle">Hide</button>
        <button id="btn-show" class="btn-toggle">Show</button>
    </div>

    <div class="tgl">
        <button id="btn-hide" class="btn-toggle">Hide2</button>
        <button id="btn-show" class="btn-toggle">Two</button>
    </div>

    <div class="tgl">
        <button id="btn-hide" class="btn-toggle">Hide3</button>
        <button id="btn-show" class="btn-toggle">Three</button>
    </div>

JS:

    $('.btn-toggle').on( 'click', function () {
      $(this).parent().find('.btn-toggle').toggle();
    });

CSS:

#btn-show {
    display: none;
}
.tgl
{
  display:inline;
}