Javascript 制作更智能的jQuery代码_Javascript_Jquery

Javascript 制作更智能的jQuery代码

javascript jquery

Javascript 制作更智能的jQuery代码,javascript,jquery,Javascript,Jquery,我想知道是否有人知道我如何重写这个简单的jquery代码以提高效率。现在它当然可以正常工作了，但我想再加上10个条目会使代码变得非常大。我想也许我可以将类添加到数组中，并使用某种循环？但不确定这是否是正确的方法在JSFIDLE上：这里有一个例子： JS: HTML: 悬停在cat 1上悬停等待第2类悬停3类默认文本第1类文本第2类文本第三类文本然后 $(".image1").mouseout(function() { myDefault.show(); my

我想知道是否有人知道我如何重写这个简单的jquery代码以提高效率。现在它当然可以正常工作了，但我想再加上10个条目会使代码变得非常大。我想也许我可以将类添加到数组中，并使用某种循环？但不确定这是否是正确的方法

在JSFIDLE上：

这里有一个例子： JS:

HTML:


悬停在cat 1上
悬停等待第2类
悬停3类
默认文本
第1类文本
第2类文本
第三类文本

然后

$(".image1").mouseout(function() {
    myDefault.show();
   myCat1.hide();
    }).mouseover(function() {
        myDefault .hide();
        myCat1 .show();
 });

$(".image2").mouseout(function() {
    myDefault.show();
    myCat2.hide();
    }).mouseover(function() {
       myDefault.hide();
        myCat2.show();
});

将减少dom遍历，并且

如果可以将一类图像放在当前具有image1、image2等的div上，则可以执行以下操作：

$(".image").hover(function() {
    $(".default").toggle();
    $("#cats p").eq($(this).index()).toggle();
});

这假设图像div的顺序与#cats中的p标记的顺序相同

使用数据属性的示例：

JS:

HTML:


悬停在cat 1上
第1类文本

比如说

<div class="image" data-id="1">
  <p>Hover for cat 1</p>
</div>
<div class="image" data-id="2">
  <p>Hover for cat 2</p>
</div>
<div class="image" data-id="3">
  <p>Hover for cat 3</p>
</div>
<div class="default">
  <p>Default Text</p>
</div>
<div id="cats">
  <p class="cat1">Category 1 text</p>
  <p class="cat2">Category 2 text</p>
  <p class="cat3">Category 3 text</p>
</div>

$(document).ready(function() {

   $(".image").mouseout(function() {
        $(".default").show();
        $(".cat"+$(this).data('id')).hide();
   }).mouseover(function() {
            $(".default").hide();
            $(".cat"+$(this).data('id')).show();
   });

});


悬停在cat 1上
悬停等待第2类
悬停3类
默认文本
第1类文本
第2类文本
第三类文本
$（文档）.ready（函数（）{
$（“.image”）.mouseout（函数（）{
$（“.default”）.show（）；
$（“.cat”+$（this.data（'id'））.hide（）；
}).mouseover（函数（）{
$（“.default”）.hide（）；
$（“.cat”+$（this.data（'id'））.show（）；
});
});

类似的方法应该可以奏效：

<div class="default">Content</div>
<img class="image" data-ref="1" />
<div class="cat" data-ref="1">Cat 1</div>
<img class="image" data-ref="2" />
<div class="cat" data-ref="2">Cat 2</div>

$('.image').hover(function() {
    $('.default, .cat[data-ref='+$(this).data('ref')+']').toggle();
});

内容
第一类
第2类
$（'.image'）.hover（函数（）{
$（'.default.cat[data ref='+$（this.data（'ref'）+']'）。toggle（）；
});

我想说你应该利用两件事

使用

data-

属性和jQuery的

.data

方法

一个泛型类，用于标识希望具有此行为的所有图像

然后，所有这些项目的代码变为：

$(".image").mouseout(function() {
        $(".default").show();
        $(".cat" + $(this).data('id')).hide();
        }).mouseover(function() {
            $(".default").hide();
            $(".cat" + $(this).data('id')).show();
           });

实例：

这是我的代码

示例：

$(document).ready(function() {
$('.image').hover(
    function(){
        $('.default p').html($(this).children('p').html());
    }, 
    function(){$('.default p').html('Default Text')}); 
});

去掉所有的

cat

div，使用默认文本创建一个div，然后只更新这个文本。

首先，如果目标div尚未包含，我会将它们包装在父div中，如下所示：

<div id="images">
  <div class="image1">
    <p>Hover for cat 1</p>
  </div>

   etc..
</div>

编辑

实际上，您可以通过删除“image1”、“image2”、“image3”并将类命名为“image”来进一步清理它。您还可以从#cats中的

中删除该类

有关修订后的示例，请参见此处-

编辑2

有一天，您会动态添加一个cat div，并想知道事件处理程序为什么不工作。。。然后你会重新审视我的答案：）就像。。。约翰真的有一个100%完整的解决方案=p

以下是我的尝试，将类别文本移动到div元素会使事情变得更简单

*{
字体大小：20px；
文本对齐：居中；
}
.图像猫悬停{
浮动：左；
宽度：150px；
边框：薄实线#CCC；
边缘底部：20px；
}
#猫，.default{
宽度：450px；
}
悬停在cat 1上
悬停等待第2类
悬停3类
默认文本
$（文档）.ready（函数（）{
var defaultText=$（“.default”）.text（）；
$（“.image cat hover”）.mouseout（函数（）{
$（“.default”）.text（defaultText）；
}).mouseover（函数（）{
$（.default”）.text（$（this.data（“category”）；
});
});

编辑

我必须说我已经学会了很多回答和阅读这个问题的其他答案。以下是最新的答复：


默认文本

$（文档）.ready（函数（）{
$（“.image cat hover”）.hover（函数（）{
$（“#defaultText”）.toggle（）；
$（“#占位符”）.toggle（）.text（$（this.data（“category”））；
});
});

类似这样的东西

您的HTML结构是什么样子的？嗨，为了方便起见，我已经将其全部粘贴到JSFIDLE。这是上面的链接：）你的类名看起来很像ID。您应该尝试以某种方式在元素之间创建绑定+我加入了你的HTML，以防JSFIDLE在将来出现，你的问题仍然是有用的。如前所述，优化代码的最聪明的方法是用IDs替换那些一次性使用的CSS类（image1、cat1、image2、default等）。嗨，尽管这更简洁，因为它使用了变量，它并没有真正缩短code.np的总长度，如果您的div和p标记不能保证顺序相同，我建议使用像Andys answer这样的数据属性。这看起来也很好。但由于自定义div属性，它没有针对w3进行验证：（@Alex Berg在提出这个问题之前，我不知道你可以使用

data xxx

属性。这太棒了，我将在这里编辑。在最近的一个工作项目中，也有十几个地方……可能有人认为他的建议比其他人的好。

<div class="image" data-id="1">
  <p>Hover for cat 1</p>
</div>
<div class="image" data-id="2">
  <p>Hover for cat 2</p>
</div>
<div class="image" data-id="3">
  <p>Hover for cat 3</p>
</div>
<div class="default">
  <p>Default Text</p>
</div>
<div id="cats">
  <p class="cat1">Category 1 text</p>
  <p class="cat2">Category 2 text</p>
  <p class="cat3">Category 3 text</p>
</div>

$(document).ready(function() {

   $(".image").mouseout(function() {
        $(".default").show();
        $(".cat"+$(this).data('id')).hide();
   }).mouseover(function() {
            $(".default").hide();
            $(".cat"+$(this).data('id')).show();
   });

});

<div class="default">Content</div>
<img class="image" data-ref="1" />
<div class="cat" data-ref="1">Cat 1</div>
<img class="image" data-ref="2" />
<div class="cat" data-ref="2">Cat 2</div>

$('.image').hover(function() {
    $('.default, .cat[data-ref='+$(this).data('ref')+']').toggle();
});

$(".image").mouseout(function() {
        $(".default").show();
        $(".cat" + $(this).data('id')).hide();
        }).mouseover(function() {
            $(".default").hide();
            $(".cat" + $(this).data('id')).show();
           });

$(document).ready(function() {
$('.image').hover(
    function(){
        $('.default p').html($(this).children('p').html());
    }, 
    function(){$('.default p').html('Default Text')}); 
});

<div id="images">
  <div class="image1">
    <p>Hover for cat 1</p>
  </div>

   etc..
</div>

$('#images').delegate('div[class^=image]', 'mouseenter mouseleave', function(e) {
   $('.default').toggle(e.type === 'mouseleave');
   $('#cats p').eq($(this).index()).toggle(e.type !== 'mouseleave');
});

* {
    font-size: 20px;
    text-align: center;
}
.image-cat-hover {
    float: left;
    width: 150px;
    border: thin solid #CCC;
    margin-bottom: 20px;
}
#cats, .default { 
    width: 450px;
}

<div class="image-cat-hover" data-category="Category 1 text">
  <p>Hover for cat 1</p>
</div>
<div class="image-cat-hover" data-category="Category 2 text">
  <p>Hover for cat 2</p>
</div>
<div class="image-cat-hover" data-category="Category 3 text">
  <p>Hover for cat 3</p>
</div>
<div class="default">
  <p id="placeholder">Default Text</p>
</div>

$(document).ready(function() {
    var defaultText = $(".default").text();
    $(".image-cat-hover").mouseout(function() {
        $(".default").text(defaultText);
        }).mouseover(function() {
            $(".default").text($(this).data("category"));
           });

});

<div>
  <p id="defaultText">Default Text</p>
  <p id="placeholder" style="display:none;"></p>
</div>

$(document).ready(function() {
    $(".image-cat-hover").hover(function() {
        $("#defaultText").toggle();
        $("#placeholder").toggle().text($(this).data("category"));
    });
});

$(document).ready(function() {

    var defaultCat = $(".default");
    var cat1 = $(".cat1");
    var cat2 = $(".cat2");
    var cat3 = $(".cat3");

    $(".image").mouseout(function() {
        cat1.hide();
        cat2.hide();
        cat3.hide();
        defaultCat.show();
    });

    $(".i1").mouseover(function() {
        cat1.show();
        defaultCat.hide();
    });
    $(".i2").mouseover(function() {
        cat2.show();
        defaultCat.hide();
    });
    $(".i3").mouseover(function() {
        cat3.show();
        defaultCat.hide();
    });
});