我如何 "DRY" 设置我的 html 和 javascript 代码？

Question

我有一些html和js代码。我不明白我怎么能干掉这些代码。我正在使用 bootstrap-3 和 jquery-1.11.0。在我的 js 代码上，我有一些下拉菜单。在下拉菜单中我使用了一个图标。当下拉菜单折叠时，图标变为向下箭头，当下拉菜单展开时，图标变为向上箭头。我需要干掉更改图标并在打开时关闭其他下拉菜单的代码。是否可以 "DRY" 增加我的 html 和 javascript 代码？如果可能的话，我该怎么做？谁能帮帮我？

这是我的 html 代码：

    <div id="cpc" class="color-picker-container">
        <div id="cpcc" class="color-picker-container_content">
            <div class="main-tools"><span id="m-tools" class="main-tools-dropdown color-picker uS cursor-pointer">Tools<span id="m-tools-arrow" class="glyphicon glyphicon-menu-down"></span></span></div>
            <div class="pred">
                <div class="picker-btn-holder"><span id="tools" class="tools-dropdown color-picker cursor-pointer uS">Predefined<span id="tools-arrow" class="glyphicon glyphicon-menu-down"></span></span></div>
                <div class="color-picker-btns-holder">
                    <div class="picker-btn-holder"><span id="btn-color" class="color-dropdown-1 color-picker cursor-pointer">Button color<span id="bg-color-arrow" class="glyphicon glyphicon-menu-down"></span></span></div>
                    <ul class="eg-color-ul-1">
                        <li class="color-holder"><a id="btn-color-1" class="eg-color c1"></a></li>
                        <li class="color-holder"><a id="btn-color-2" class="eg-color c2"></a></li>
                        <li class="color-holder"><a id="btn-color-3" class="eg-color c3"></a></li>
                        <li class="color-holder"><a id="btn-color-4" class="eg-color c4"></a></li>
                        <li class="color-holder"><a id="btn-color-5" class="eg-color c5"></a></li>
                        <li class="color-holder"><a id="btn-color-6" class="eg-color c6"></a></li>
                        <li class="color-holder"><a id="btn-color-7" class="eg-color c7"></a></li>
                        <li class="color-holder"><a id="btn-color-8" class="eg-color c8"></a></li>
                        <li class="color-holder"><a id="btn-color-9" class="eg-color c9"></a></li>
                        <li class="color-holder"><a id="btn-color-10" class="eg-color c10"></a></li>
                        <li class="color-holder"><a id="btn-color-11" class="eg-color c11"></a></li>
                        <li class="color-holder"><a id="btn-color-12" class="eg-color c12"></a></li>
                        <li class="color-holder"><a id="btn-color-13" class="eg-color c13"></a></li>
                        <li class="color-holder"><a id="btn-color-14" class="eg-color c14"></a></li>
                        <li class="color-holder"><a id="btn-color-15" class="eg-color c15"></a></li>
                        <li class="color-holder"><a id="btn-color-16" class="eg-color c16"></a></li>
                        <li class="color-holder"><a id="btn-color-17" class="eg-color c17"></a></li>
                        <li class="color-holder"><a id="btn-color-18" class="eg-color c18"></a></li>
                        <li class="color-holder"><a id="btn-color-19" class="eg-color c19"></a></li>
                        <li class="color-holder"><a id="btn-color-20" class="eg-color c20"></a></li>
                        <li class="color-holder"><a id="btn-color-21" class="eg-color c21"></a></li>
                        <li class="color-holder"><a id="btn-color-22" class="eg-color c22"></a></li>
                        <li class="color-holder"><a id="btn-color-23" class="eg-color c23"></a></li>
                        <li class="color-holder"><a id="btn-color-24" class="eg-color c24"></a></li>
                        <li class="color-holder"><a id="btn-color-25" class="eg-color c25"></a></li>
                        <li class="color-holder"><a id="btn-color-26" class="eg-color c26"></a></li>
                        <li class="color-holder"><a id="btn-color-27" class="eg-color c27"></a></li>
                        <li class="color-holder"><a id="btn-color-28" class="eg-color c28"></a></li>
                        <li class="color-holder"><a id="btn-color-29" class="eg-color c29"></a></li>
                        <li class="color-holder"><a id="btn-color-30" class="eg-color c30"></a></li>
                        <li class="color-holder"><a id="btn-color-31" class="eg-color c31"></a></li>
                        <li class="color-holder"><a id="btn-color-32" class="eg-color c32"></a></li>
                        <li class="color-holder"><a id="btn-color-33" class="eg-color c33"></a></li>
                        <li class="color-holder"><a id="btn-color-34" class="eg-color c34"></a></li>
                        <li class="color-holder"><a id="btn-color-35" class="eg-color c35"></a></li>
                        <li class="color-holder"><a id="btn-color-36" class="eg-color c36"></a></li>
                        <li class="color-holder"><a id="btn-color-37" class="eg-color c37"></a></li>
                        <li class="color-holder"><a id="btn-color-38" class="eg-color c38"></a></li>
                        <li class="color-holder"><a id="btn-color-39" class="eg-color c39"></a></li>
                        <li class="color-holder"><a id="btn-color-40" class="eg-color c40"></a></li>
                        <li class="color-holder"><a id="btn-color-41" class="eg-color c41"></a></li>
                        <li class="color-holder"><a id="btn-color-42" class="eg-color c42"></a></li>
                        <li class="color-holder"><a id="btn-color-43" class="eg-color c43"></a></li>
                        <li class="color-holder"><a id="btn-color-44" class="eg-color c44"></a></li>
                        <li class="color-holder"><a id="btn-color-45" class="eg-color c45"></a></li>
                        <li class="color-holder"><a id="btn-color-46" class="eg-color c46"></a></li>
                        <li class="color-holder"><a id="btn-color-47" class="eg-color c47"></a></li>
                        <li class="color-holder"><a id="btn-color-48" class="eg-color c48"></a></li>
                        <li class="color-holder"><a id="btn-color-49" class="eg-color c49"></a></li>
                        <li class="color-holder"><a id="btn-color-50" class="eg-color c50"></a></li>
                        <li class="color-holder"><a id="btn-color-51" class="eg-color c51"></a></li>
                        <li class="color-holder"><a id="btn-color-52" class="eg-color c52"></a></li>
                        <li class="color-holder"><a id="btn-color-53" class="eg-color c53"></a></li>
                        <li class="color-holder"><a id="btn-color-54" class="eg-color c54"></a></li>
                        <li class="color-holder"><a id="btn-color-55" class="eg-color c55"></a></li>
                        <li class="color-holder"><a id="btn-color-56" class="eg-color c56"></a></li>
                        <li class="color-holder"><a id="btn-color-57" class="eg-color c57"></a></li>
                        <li class="color-holder"><a id="btn-color-58" class="eg-color c58"></a></li>
                        <li class="color-holder"><a id="btn-color-59" class="eg-color c59"></a></li>
                        <li class="color-holder"><a id="btn-color-60" class="eg-color c60"></a></li>
                        <li class="color-holder"><a id="btn-color-61" class="eg-color c61"></a></li>
                        <li class="color-holder"><a id="btn-color-62" class="eg-color c62"></a></li>
                        <li class="color-holder"><a id="btn-color-63" class="eg-color c63"></a></li>
                        <li class="color-holder"><a id="btn-color-64" class="eg-color c64"></a></li>
                    </ul>
                    <div class="picker-btn-holder"><span class="color-dropdown-2 color-picker cursor-pointer">Text color<span id="text-color-arrow" class="glyphicon glyphicon-menu-down"></span></span></div>
                    <ul class="eg-color-ul-2">
                        <li class="color-holder"><a id="text-color-1" class="eg-color c1"></a></li>
                        <li class="color-holder"><a id="text-color-2" class="eg-color c2"></a></li>
                        <li class="color-holder"><a id="text-color-3" class="eg-color c3"></a></li>
                        <li class="color-holder"><a id="text-color-4" class="eg-color c4"></a></li>
                        <li class="color-holder"><a id="text-color-5" class="eg-color c5"></a></li>
                        <li class="color-holder"><a id="text-color-6" class="eg-color c6"></a></li>
                        <li class="color-holder"><a id="text-color-7" class="eg-color c7"></a></li>
                        <li class="color-holder"><a id="text-color-8" class="eg-color c8"></a></li>
                        <li class="color-holder"><a id="text-color-9" class="eg-color c9"></a></li>
                        <li class="color-holder"><a id="text-color-10" class="eg-color c10"></a></li>
                        <li class="color-holder"><a id="text-color-11" class="eg-color c11"></a></li>
                        <li class="color-holder"><a id="text-color-12" class="eg-color c12"></a></li>
                        <li class="color-holder"><a id="text-color-13" class="eg-color c13"></a></li>
                        <li class="color-holder"><a id="text-color-14" class="eg-color c14"></a></li>
                        <li class="color-holder"><a id="text-color-15" class="eg-color c15"></a></li>
                        <li class="color-holder"><a id="text-color-16" class="eg-color c16"></a></li>
                        <li class="color-holder"><a id="text-color-17" class="eg-color c17"></a></li>
                        <li class="color-holder"><a id="text-color-18" class="eg-color c18"></a></li>
                        <li class="color-holder"><a id="text-color-19" class="eg-color c19"></a></li>
                        <li class="color-holder"><a id="text-color-20" class="eg-color c20"></a></li>
                        <li class="color-holder"><a id="text-color-21" class="eg-color c21"></a></li>
                        <li class="color-holder"><a id="text-color-22" class="eg-color c22"></a></li>
                        <li class="color-holder"><a id="text-color-23" class="eg-color c23"></a></li>
                        <li class="color-holder"><a id="text-color-24" class="eg-color c24"></a></li>
                        <li class="color-holder"><a id="text-color-25" class="eg-color c25"></a></li>
                        <li class="color-holder"><a id="text-color-26" class="eg-color c26"></a></li>
                        <li class="color-holder"><a id="text-color-27" class="eg-color c27"></a></li>
                        <li class="color-holder"><a id="text-color-28" class="eg-color c28"></a></li>
                        <li class="color-holder"><a id="text-color-29" class="eg-color c29"></a></li>
                        <li class="color-holder"><a id="text-color-30" class="eg-color c30"></a></li>
                        <li class="color-holder"><a id="text-color-31" class="eg-color c31"></a></li>
                        <li class="color-holder"><a id="text-color-32" class="eg-color c32"></a></li>
                        <li class="color-holder"><a id="text-color-33" class="eg-color c33"></a></li>
                        <li class="color-holder"><a id="text-color-34" class="eg-color c34"></a></li>
                        <li class="color-holder"><a id="text-color-35" class="eg-color c35"></a></li>
                        <li class="color-holder"><a id="text-color-36" class="eg-color c36"></a></li>
                        <li class="color-holder"><a id="text-color-37" class="eg-color c37"></a></li>
                        <li class="color-holder"><a id="text-color-38" class="eg-color c38"></a></li>
                        <li class="color-holder"><a id="text-color-39" class="eg-color c39"></a></li>
                        <li class="color-holder"><a id="text-color-40" class="eg-color c40"></a></li>
                        <li class="color-holder"><a id="text-color-41" class="eg-color c41"></a></li>
                        <li class="color-holder"><a id="text-color-42" class="eg-color c42"></a></li>
                        <li class="color-holder"><a id="text-color-43" class="eg-color c43"></a></li>
                        <li class="color-holder"><a id="text-color-44" class="eg-color c44"></a></li>
                        <li class="color-holder"><a id="text-color-45" class="eg-color c45"></a></li>
                        <li class="color-holder"><a id="text-color-46" class="eg-color c46"></a></li>
                        <li class="color-holder"><a id="text-color-47" class="eg-color c47"></a></li>
                        <li class="color-holder"><a id="text-color-48" class="eg-color c48"></a></li>
                        <li class="color-holder"><a id="text-color-49" class="eg-color c49"></a></li>
                        <li class="color-holder"><a id="text-color-50" class="eg-color c50"></a></li>
                        <li class="color-holder"><a id="text-color-51" class="eg-color c51"></a></li>
                        <li class="color-holder"><a id="text-color-52" class="eg-color c52"></a></li>
                        <li class="color-holder"><a id="text-color-53" class="eg-color c53"></a></li>
                        <li class="color-holder"><a id="text-color-54" class="eg-color c54"></a></li>
                        <li class="color-holder"><a id="text-color-55" class="eg-color c55"></a></li>
                        <li class="color-holder"><a id="text-color-56" class="eg-color c56"></a></li>
                        <li class="color-holder"><a id="text-color-57" class="eg-color c57"></a></li>
                        <li class="color-holder"><a id="text-color-58" class="eg-color c58"></a></li>
                        <li class="color-holder"><a id="text-color-59" class="eg-color c59"></a></li>
                        <li class="color-holder"><a id="text-color-60" class="eg-color c60"></a></li>
                        <li class="color-holder"><a id="text-color-61" class="eg-color c61"></a></li>
                        <li class="color-holder"><a id="text-color-62" class="eg-color c62"></a></li>
                        <li class="color-holder"><a id="text-color-63" class="eg-color c63"></a></li>
                        <li class="color-holder"><a id="text-color-64" class="eg-color c64"></a></li>
                    </ul>
                    <div class="picker-btn-holder"><span class="color-dropdown-3 color-picker cursor-pointer">Others<span id="size-arrow" class="glyphicon glyphicon-menu-down"></span></span></div>
                    <ul class="eg-color-ul-3 uS">
                        <li class="range-holder">
                            <div class="font-section">
                                <div class="font-size-range-holder">
                                    <a class="range-title uS">Font size:</a>
                                    <div id="size-range" class="flat-slider"></div>
                                    <a class="size-range-value-holder uS">20 px</a>
                                </div>
                            </div>
                        </li>
                        <li class="range-holder uS">
                            <div id="padding-h-range">
                                <a class="hp-titel uS">Horizontal Padding:</a>
                                <div id="pt-range" class="flat-slider"></div>
                                <a class="pt-range-value uS">20 px</a>
                            </div>
                            <div id="padding-v-range">
                                <a class="Vp-titel uS">Vertical Padding:</a>
                                <div id="ps-range" class="flat-slider"></div>
                                <a class="VP-range-value">20 px</a>
                            </div>
                        </li>
                        <li class="range-holder No-B uS">
                            <div id="padding-br-range">
                                <a class="br-titel uS">Border Radius:</a>
                                <div id="br-range" class="flat-slider"></div>
                                <a class="br-range-value uS">0 px</a>
                            </div>
                        </li>
                    </ul>
                </div>

                <div class="custom-tools"><span id="c-tools" class="c-tools-dropdown color-picker cursor-pointer uS">Custom<span id="c-tools-arrow" class="glyphicon glyphicon-menu-down"></span></span></div>
                <div class="custom-tools-holder">
                    <div class="picker-btn-holder"><span id="c-btn-color" class="color-picker cursor-pointer uS">Button color<span id="c-bg-color-arrow" class="glyphicon glyphicon-menu-down icon-expand-collapse-after"></span></span></div>
                    <ul class="c-bg-color">
                        <li class="hsl-holder"><div class="c-color-bg"><div id="range-slider1"></div></div></li>
                        <li class="hsl-holder"><div class="c-color-bg"><div id="range-slider2"></div></div></li>
                    </ul>
                </div>
            </div>
        </div><!--
        --><div class="puller"><span id="Pico" class="fa fa-chevron-right"></span></div>
    </div>

这是我的js代码：

/* hide the color picker  */
    $(".pred").hide();
    $(".eg-color-ul-1").hide();
    $(".eg-color-ul-2").hide();
    $(".eg-color-ul-3").hide();
    $(".color-picker-btns-holder").hide();
    $(".custom-tools-holder").hide();
    $(".c-bg-color").hide();    
/* toggleClass */

var m_tools_arrow = document.getElementById ('m-tools-arrow');
$(".main-tools-dropdown").click(function() {
    $(".pred").slideToggle(300);
    $(m_tools_arrow).removeClass('icon-expand-collapse-after');
    if (m_tools_arrow .className === 'glyphicon glyphicon-menu-down') {
        $(m_tools_arrow).addClass('icon-expand-collapse');
    }
    else if (m_tools_arrow .className === 'glyphicon glyphicon-menu-down icon-expand-collapse'){
        $(m_tools_arrow).removeClass('icon-expand-collapse');
        $(m_tools_arrow).addClass('icon-expand-collapse-after');
    };
});
var tools_arrow = document.getElementById ('tools-arrow');
$(".tools-dropdown").click(function() {
    $(".color-picker-btns-holder").slideToggle(300);
    $(".custom-tools-holder").slideUp (300);
    $(c_tools_arrow).removeClass('icon-expand-collapse');
    $(c_tools_arrow).addClass('icon-expand-collapse-after');
    $(tools_arrow).removeClass('icon-expand-collapse-after');
    if (tools_arrow .className === 'glyphicon glyphicon-menu-down') {
        $(tools_arrow).addClass('icon-expand-collapse');
    }
    else if (tools_arrow .className === 'glyphicon glyphicon-menu-down icon-expand-collapse'){
        $(tools_arrow).removeClass('icon-expand-collapse');
        $(tools_arrow).addClass('icon-expand-collapse-after');
    };
});
var c_tools_arrow = document.getElementById ('c-tools-arrow');
$(".c-tools-dropdown").click(function() {
    $(".custom-tools-holder").slideToggle(300);
    $(".color-picker-btns-holder").slideUp (300);
    $(tools_arrow).removeClass('icon-expand-collapse');
    $(tools_arrow).addClass('icon-expand-collapse-after');
    $(c_tools_arrow).removeClass('icon-expand-collapse-after');
    if (c_tools_arrow .className === 'glyphicon glyphicon-menu-down') {
        $(c_tools_arrow).addClass('icon-expand-collapse');
    }
    else if (c_tools_arrow .className === 'glyphicon glyphicon-menu-down icon-expand-collapse'){
        $(c_tools_arrow).removeClass('icon-expand-collapse');
        $(c_tools_arrow).addClass('icon-expand-collapse-after');
    };
});
var bg_arrow = document.getElementById ('bg-color-arrow');
$(".color-dropdown-1").click(function() {
    $(".eg-color-ul-1").slideToggle(300);
    $(".eg-color-ul-2").slideUp (300);
    $(".eg-color-ul-3").slideUp (300);
    $(text_arrow).removeClass('icon-expand-collapse');
    $(text_arrow).addClass('icon-expand-collapse-after');
    $(size_arrow).removeClass('icon-expand-collapse');
    $(size_arrow).addClass('icon-expand-collapse-after');
    $(bg_arrow).removeClass('icon-expand-collapse-after');
    if (bg_arrow .className === 'glyphicon glyphicon-menu-down') {
        $(bg_arrow).addClass('icon-expand-collapse');
    }
    else if (bg_arrow .className === 'glyphicon glyphicon-menu-down icon-expand-collapse'){
        $(bg_arrow).removeClass('icon-expand-collapse');
        $(bg_arrow).addClass('icon-expand-collapse-after');
    };
});
var text_arrow = document.getElementById ('text-color-arrow');
$(".color-dropdown-2").click(function() {
    $(".eg-color-ul-2").slideToggle(300);
    $(".eg-color-ul-1").slideUp (300);
    $(".eg-color-ul-3").slideUp (300);
    $(bg_arrow).removeClass('icon-expand-collapse');
    $(bg_arrow).addClass('icon-expand-collapse-after');
    $(size_arrow).removeClass('icon-expand-collapse');
    $(size_arrow).addClass('icon-expand-collapse-after');
    $(text_arrow).removeClass('icon-expand-collapse-after');
    if (text_arrow .className === 'glyphicon glyphicon-menu-down') {
        $(text_arrow).addClass('icon-expand-collapse');
    }
    else if (text_arrow .className === 'glyphicon glyphicon-menu-down icon-expand-collapse'){
        $(text_arrow).removeClass('icon-expand-collapse');
        $(text_arrow).addClass('icon-expand-collapse-after');
    };
});
var size_arrow = document.getElementById ('size-arrow');
$(".color-dropdown-3").click(function() {
    $(".eg-color-ul-3").slideToggle(300);
    $(".eg-color-ul-2").slideUp (300);
    $(".eg-color-ul-1").slideUp (300);
    $(bg_arrow).removeClass('icon-expand-collapse');
    $(bg_arrow).addClass('icon-expand-collapse-after');
    $(text_arrow).removeClass('icon-expand-collapse');
    $(text_arrow).addClass('icon-expand-collapse-after');
    $(size_arrow).removeClass('icon-expand-collapse-after');
    if (size_arrow .className === 'glyphicon glyphicon-menu-down') {
        $(size_arrow).addClass('icon-expand-collapse');
    }
    else if (size_arrow .className === 'glyphicon glyphicon-menu-down icon-expand-collapse'){
        $(size_arrow).removeClass('icon-expand-collapse');
        $(size_arrow).addClass('icon-expand-collapse-after');
    };
});

var c_bg_arrow = document.getElementById ('c-bg-color-arrow');
$("#c-btn-color").click(function() {
    $(".c-bg-color").slideToggle(300);
    $(c_bg_arrow).removeClass('icon-expand-collapse-after');
    if (c_bg_arrow .className === 'glyphicon glyphicon-menu-down') {
        $(c_bg_arrow).addClass('icon-expand-collapse');
    }
    else if (c_bg_arrow .className === 'glyphicon glyphicon-menu-down icon-expand-collapse'){
        $(c_bg_arrow).removeClass('icon-expand-collapse');
        $(c_bg_arrow).addClass('icon-expand-collapse-after');
    };
});

Answer 1

让我们想想我们可以抽象掉什么，从任何重复的东西开始。

我会给你一个很好的提示，你可以从那里得到它：

除了 class 和 id 之外，所有的 li 标签都是一样的，所以你可以创建一个 javascript 函数来跟踪一个计数器，然后使用 jquery要在循环时追加：

var ol = $('ol');

for (var i = 0; i < 40; i++) {
  ol.append('<li id=' + i + '>' + 'hello ' + i + '</li>');
}

工作 JSBin https://jsbin.com/paturi/3/edit?html,js,output

关于 JS:

这里的关键是尽可能抽象 css：

$(".eg-color-ul-1").hide();
$(".eg-color-ul-2").hide();
$(".eg-color-ul-3").hide();

如果 class 只是 .eg-color-ul

会怎么样

然后你可以用一行隐藏它们，但这取决于 css 没有它我不知道这是否肯定有效。关键是您需要尝试使用尽可能少的 classes / id。这样你就可以抓取多个元素并一次更改它们。

我如何 "DRY" 设置我的 html 和 javascript 代码？

How can I "DRY" up my html and javascript codes?

html

javascript

jquery

dry

twitter-bootstrap