Question

我继续前进并最小化了我的很多HTML代码，这样你就可以更容易地看到事情，是的 - 它需要清理。

HTML CODE：

    <!-- LEFT COLUMN -->
<div class="column1" style="flex-grow: 1 !important;">
    <!-- APPRENTICE LIST -->
    <div onclick="console.log('clicked')" id="button" class="test1">
        <P>header junk</P>
    </div>
    <table id="table">
        <p>table junk</p>
    </table>

    <!-- JOURNEYMAN LIST -->
    <div onclick="console.log('clicked')" id="button1" class="test1">
        <P>header junk</P>
    </div>
    <table id="table1">
        <p>table junk</p>
    </table>

    <!-- EXPERT LIST -->
    <div onclick="console.log('clicked')" id="button2" class="test1">
        <P>header junk</P>
    </div>
    <table id="table2">
        <p>table junk</p>
    </table>

    <!-- ARTISAN LIST -->
    <div onclick="console.log('button3')" id="button3" class="test1">
        <P>header junk</P>
    </div>
    <table id="table3">
        <p>table junk</p>
    </table>
</div>

<!-- Middle Column -->
<div class="column1" style="flex-grow: 2 !important;">
    <!-- APPRENTICE GUIDE -->
    <div class="imagebox" id="box">
        <p>header junk</p>
        <div class="box3">
            <table class="test3">
                <p>table junk</p>
            </table>
        </div>
    </div>
    <!-- JOURNEYMAN GUIDE -->
    <div class="imagebox" id="box1">
        <p>header junk</p>
        <div class="box3">
            <table class="test3">
                <p>table junk</p>
            </table>
        </div>
    </div>
    <!-- EXPERT GUIDE -->
    <div class="imagebox" id="box2">
        <p>header junk</p>
        <div class="box3">
            <table class="test3">
                <p>table junk</p>
            </table>
        </div>
    </div>
    <!-- ARTISAN GUIDE -->
    <div class="imagebox" id="box4">

        <div class="box3">
            <table class="test3">
                <p>table junk</p>
        </div>
        </table>
    </div>
</div>
</div>
</div>

<!-- THINGS TO KNOW APPRENTICE -->
<div class="column1" style="flex-grow: 1 !important;" id="ttk">
    <div class="body-flexstart">
        <div class="column1">
            <div class="imagebox" id="box">
                <p>header junk</p>
                <div class="thingstoknowbox">
                    <p class="professionheader4">TRAINER LOCATIONS</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- THINGS TO KNOW JOURNEYMAN -->
<div class="column1" style="flex-grow: 1 !important;" id="ttk1">
    <div class="body-flexstart">
        <div class="column1">
            <div class="imagebox">
                <p>header junk</p>
                <div class="thingstoknowbox">
                    <p class="professionheader4">TRAINER LOCATIONS</p>

                </div>
            </div>
        </div>
    </div>
</div>
<!-- THINGS TO KNOW EXPERT -->
<div class="column1" style="flex-grow: 1 !important;" id="ttk2">
    <div class="body-flexstart">
        <div class="column1">
            <div class="imagebox" id="box">
                <p>header junk</p>
                <div class="thingstoknowbox">
                    <p class="professionheader4">TRAINER LOCATIONS</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- THINGS TO KNOW ARTISAN -->
<div class="column1" style="flex-grow: 1 !important;" id="ttk3">
        <div class="body-flexstart">
            <div class="column1">
                <div class="imagebox" id="box">
                    <p>header junk</p>
                    <div class="thingstoknowbox">
                        <p class="professionheader4">TRAINER LOCATIONS</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

我向你展示了我可怕的jQuery。

jQuery CODE：

 // apprentice 0
jQuery(document).ready(function () {
    jQuery("#box1").hide();
    jQuery("#box2").hide();
    jQuery("#box3").hide();
    jQuery("#box4").hide();
    jQuery("table1").hide();
    jQuery("table2").hide();
    jQuery("table3").hide();
    jQuery("table4").hide();
    jQuery("#ttk1").hide();
    jQuery("#ttk2").hide();
    jQuery("#button").click(function () {
        jQuery("box1").hide();
        jQuery("#box2").hide();
        jQuery("#box3").hide();
        jQuery("#box4").hide();
        jQuery("table1").hide();
        jQuery("table2").hide();
        jQuery("table3").hide();
        jQuery("table4").hide();
        jQuery("#ttk1").hide();
        // show
        jQuery("box").toggle();
        jQuery("table").toggle();
        jQuery("ttk").toggle();

    });
});

// journeyman 1
jQuery(document).ready(function () {
    jQuery("#table1").hide();
    jQuery("#button1").click(function () {
        jQuery("#box").hide();
        jQuery("#box4").hide();
        jQuery("#table").hide();
        // jQuery("#table2").hide();
        jQuery("#table3").hide();
        jQuery("#ttk").hide();
        // show
        jQuery("#box1").toggle();
        jQuery("#table1").toggle();
        jQuery("#ttk1").toggle();

    });
});

// expert 2
jQuery(document).ready(function () {
    jQuery("#table2").hide();
    jQuery("#button2").click(function () {
        jQuery("#box1").hide();
        jQuery("#ttk1").hide();
        jQuery("#box").hide();
        jQuery("#box4").hide();
        jQuery("#table").hide();
        // show
        jQuery("#box2").toggle();
        jQuery("#table2").toggle();
        jQuery("#ttk2").toggle();
    });
});

// artisan 3
jQuery(document).ready(function () {
    jQuery("#table3").hide();
    jQuery("#button3").click(function () {
        jQuery("#box1").hide();
        jQuery("#table1").hide();
        jQuery("#ttk2").hide();
        jQuery("#box3").toggle();
        jQuery("#table3").toggle();
        jQuery("#ttk3").toggle();

    });
});

基本上，如果没有发布CSS，它就是

下面信息的一行

|LEFT COLUMN|  |MIDDLE COLUMN|  |THINGS TO KNOW|

按下每个按钮应该切换新窗口/隐藏每列下面的旧窗口。 Journeyman Button工作得很好，但我似乎无法把它做对了。

我见过jQuery代码，它的篇幅要短得多，而且我想看看你们是怎么做的。

Answer 1

不是使用$("#id").hide();并将其用于所有人，而是为他们分配一个类，然后像这样隐藏：$(".class").hide();

是的，在设计样式时使用类是一件好事。它有助于大幅度削减代码，使用类肯定会对您有所帮助。

要分配类，请使用class="class class2 class3"，其中空间将它们定义为单独的类。

jQuery问题切换/隐藏

1 个答案: