0

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

当我单击某些按钮时，我会触发每个函数。该功能对于前 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>
4

1 回答 1

0

只是一些评论......</p> 

> function CollarStyleFunction(event){

没有使用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 = '';

>     }
> });
于 2013-04-02T23:47:31.300 回答