Question

抱歉，刚发现我在错误的地方放了一个支架！一切都很好。谢谢你的帮助。

我点击某些按钮时会触发每个功能。前10次点击的功能很快。但是，每次触发该功能（单击按钮）时，该功能都会越来越慢。每次点击似乎需要两倍的时间。有谁知道为什么，我想更重要的是，我如何更改代码以防止这种情况？

谢谢！

function CollarStyleFunction(){

$('#Collar-Style-Box').children(".Fabrics").children(".SwatchBox").children('img').each(function () {

    var titleIs = this.title;
    if (titleIs==option) {
        $(this).parent().css("display", "inline");
    }

});


///////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////

其他一些信息和代码：

JS加载一个XML文件并将10个结构样本加载到div中（class =“Fabrics”）：

function parse(document){

    $(document).find("Swatch").each(function(){
        $(".Fabrics").append(
            '<div class="SwatchBox">'+
            '<img id="' + $(this).attr('name') + '" title="' + $(this).attr('title') + '" src="img/swatch/' + $(this).attr('name') + '.png">'+
            '</div>'
        );
    });


} //function parse End

HTML：

<!-- Collar-Style -->

    <div id="Collar-Style" class="Name">Collar Style</div>

    <div id="Collar-Style-Box" class="Box">

        <div id="Collar-Style-Options-Box" class="Options">

            <div class="SwatchBox">
                <img id="Flat-Knit" src="img/options/Flat-Knit.png">
            </div><!-- SwatchBox -->

            <div class="SwatchBox">
                <img id="Self-Fabric" src="img/options/Self-Fabric.png">
            </div><!-- SwatchBox -->

            <div class="SwatchBox">
                <img id="Woven" src="img/options/Woven.png">
            </div><!-- SwatchBox -->

        </div><!-- Collar-Style-Options-Box -->

        <div id="Collar-Style-Fabrics-Box" class="Fabrics">
        </div><!-- Collar-Style-Fabrics-Box -->

    </div><!-- Collar-Style-Box --> 

<!-- Canvas -->

    <div id="Collar-Style-Canvas" class="Canvas"></div>

Answer 1

只是一些评论......

> function CollarStyleFunction(event){

未使用事件参数，它是否有用？

>     $('#Collar-Style-Box').children(".Fabrics").children(".SwatchBox").children('img').each(function (i) {

其他人评论了使用选择器（可能会传递给本地querySelectorAll方法）而不是多个函数调用。

未使用 i 参数，它是否有用？

>     titleIs = $(this).attr('title');

执行上述操作时，变量 titleIs 变为全局变量。它应该保持在本地。获得title属性也更有效：

var titleIs = this.title;

>     if (titleIs==(option)) {

选项在其他地方初始化了吗？圆形选项：

不需要括号

  if (titleIs == option) {

>         $(this).parent().css("display", "inline");

你真的想要内联吗？考虑将display设置为''（空字符串），以便元素可以返回其默认值或继承值，例如：

this.parentNode.style.display = '';

>     }
> });

each（）函数变慢

1 个答案: