blocks|key|2649704|text|var+myDefault+=+$(".default");
var+myCat1+=++++$(".cat1");
var+myCat2+=++++$(".cat2");|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2649705|然后|unstyled|2649706|$(".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();
});|2649707|将减少dom遍历，并且improve+performance|offset|length|2649708|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/3230727/jquery-optimization-best-practices^0|0|0|0|B|J|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$B|C]]|$1|I|3|J|5|F|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|F|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<pre><code>var myDefault = $(".default");
var myCat1 =    $(".cat1");
var myCat2 =    $(".cat2");
</code></pre>

<p>and then</p>

<pre><code>$(".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();
});
</code></pre>

<p>will reduce dom traversal, and <a href="https://stackoverflow.com/questions/3230727/jquery-optimization-best-practices">improve performance</a></p>


blocks|key|4265050|text|如果您可以在当前具有image1、image2等的div上放置一类图像，那么您可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4265051|$(".image").hover(function()+{
++++$(".default").toggle();
++++$("#cats+p").eq($(this).index()).toggle();
});+|code-block|syntax|javascript|4265052|这假设图像div的顺序与#cat中的p标记的顺序相同。|4265053|http://jsfiddle.net/QVS9X/44/|offset|length|4265054|使用数据属性的示例：|4265055|JS：|4265056|$(".image").hover(function()+{
++++$(".default").toggle();
++++$($(this).data('id')).toggle()++++
});++|4265057|HTML：|4265058|<div+class="image"+data-id="#cat1">
++++<p>Hover+for+cat+1</p>
</div>
<div+id="cats">
++++<p+id="cat1">Category+1+text</p>
</div>|4265059|http://jsfiddle.net/QVS9X/55/|4265060|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|0|0|T|0|0|0|0|0|0|0|0|T|1|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|18|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|19|8|@]|9|@$K|1A|L|1B|1|1C]]|A|$]]|$1|M|3|N|5|6|7|1D|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1E|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|1F|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|1G|8|@]|9|@]|A|$]]|$1|U|3|V|5|D|7|1H|8|@]|9|@]|A|$E|F]]|$1|W|3|X|5|6|7|1I|8|@]|9|@$K|1J|L|1K|1|1L]]|A|$]]|$1|Y|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|J]]|15|$5|11|12|13|A|$14|X]]]]

<p>If you can put a class of image on the divs that current have image1, image2 etc, then you can do this:</p>

<pre><code>$(".image").hover(function() {
    $(".default").toggle();
    $("#cats p").eq($(this).index()).toggle();
}); 
</code></pre>

<p>This assumes that the image divs will be in the same order as the p tags inside #cats.</p>

<p><a href="http://jsfiddle.net/QVS9X/44/" rel="nofollow">http://jsfiddle.net/QVS9X/44/</a></p>

<p>Example using data attributes:</p>

<p>JS:</p>

<pre><code>$(".image").hover(function() {
    $(".default").toggle();
    $($(this).data('id')).toggle()    
});  
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div class="image" data-id="#cat1"&gt;
    &lt;p&gt;Hover for cat 1&lt;/p&gt;
&lt;/div&gt;
&lt;div id="cats"&gt;
    &lt;p id="cat1"&gt;Category 1 text&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p><a href="http://jsfiddle.net/QVS9X/55/" rel="nofollow">http://jsfiddle.net/QVS9X/55/</a></p>


blocks|key|2649733|text|以http://jsfiddle.net/QVS9X/45/为例|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2649734|<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"%2B$(this).data('id')).hide();
+++}).mouseover(function()+{
++++++++++++$(".default").hide();
++++++++++++$(".cat"%2B$(this).data('id')).show();
+++});

});|code-block|syntax|javascript|2649735|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/QVS9X/45/^0|1|T|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p><a href="http://jsfiddle.net/QVS9X/45/" rel="nofollow">http://jsfiddle.net/QVS9X/45/</a>
for example</p>

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

$(document).ready(function() {

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

});
</code></pre>


blocks|key|557924|text|类似这样的事情应该会奏效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|557925|<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='%2B$(this).data('ref')%2B']').toggle();
});|code-block|syntax|javascript|557926|http://jsfiddle.net/cugmj/2/|offset|length|557927|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|S|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

<p>Something along the lines of this should work:</p>

<pre><code>&lt;div class="default"&gt;Content&lt;/div&gt;
&lt;img class="image" data-ref="1" /&gt;
&lt;div class="cat" data-ref="1"&gt;Cat 1&lt;/div&gt;
&lt;img class="image" data-ref="2" /&gt;
&lt;div class="cat" data-ref="2"&gt;Cat 2&lt;/div&gt;

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

<p><a href="http://jsfiddle.net/cugmj/2/" rel="nofollow">http://jsfiddle.net/cugmj/2/</a></p>


blocks|key|2649775|text|我想说你应该利用两件事|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2649776|2649777|+data-属性的使用和jQuery的.data方法|ordered-list-item|offset|length|style|CODE|2649778|一个泛型类，用于标识您希望具有此行为的所有图像|2649779|2649780|那么所有这些项目的代码就变成了：|2649781|$(".image").mouseout(function()+{
++++++++$(".default").show();
++++++++$(".cat"+%2B+$(this).data('id')).hide();
++++++++}).mouseover(function()+{
++++++++++++$(".default").hide();
++++++++++++$(".cat"+%2B+$(this).data('id')).show();
+++++++++++});|code-block|syntax|javascript|2649782|现场示例：http://jsfiddle.net/sW8mZ/|2649783|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/sW8mZ/^0|0|0|1|5|J|5|0|0|0|0|0|5|Q|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|14|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|15|8|@$F|16|G|17|H|I]|$F|18|G|19|H|I]]|9|@]|A|$]]|$1|J|3|K|5|E|7|1A|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1C|8|@]|9|@]|A|$]]|$1|O|3|P|5|Q|7|1D|8|@]|9|@]|A|$R|S]]|$1|T|3|U|5|6|7|1E|8|@]|9|@$F|1F|G|1G|1|1H]]|A|$]]|$1|V|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]]|W|$X|$5|Y|Z|10|A|$11|12]]]]

<p>I would say you should make use of two things</p>

<ol>
<li>Use of <code>data-</code> attributes and jQuery's <code>.data</code> method</li>
<li>A generic class used to identify all images that you want to have this behaviour</li>
</ol>

<p>Then your code for all those items becomes:</p>

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

<p>Live example: <a href="http://jsfiddle.net/sW8mZ/" rel="nofollow">http://jsfiddle.net/sW8mZ/</a></p>


blocks|key|4549103|text|这是我的代码。http://jsfiddle.net/QVS9X/47/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4549104|示例：|4549105|$(document).ready(function()+{
$('.image').hover(
++++function(){
++++++++$('.default+p').html($(this).children('p').html());
++++},+
++++function(){$('.default+p').html('Default+Text')});+
});|code-block|syntax|javascript|4549106|去掉所有的cat+div，有一个带有默认文本的div，然后只需更新这个文本。|style|CODE|4549107|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/QVS9X/47/^0|7|T|0|0|0|0|5|3|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|12|8|@$A|13|B|14|M|N]]|9|@]|C|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

<p>Here is my code. <a href="http://jsfiddle.net/QVS9X/47/" rel="nofollow">http://jsfiddle.net/QVS9X/47/</a></p>

<p>examples:</p>

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

<p>Get rid of all the <code>cat</code> divs, have 1 div with default text, and then just update this text.</p>


blocks|key|2649847|text|首先，如果目标div还没有包含在父div中，我会将它们包装在父div中-如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2649848|<div+id="images">
++<div+class="image1">
++++<p>Hover+for+cat+1</p>
++</div>

+++etc..
</div>|code-block|syntax|javascript|2649849|然后，您可以绑定单个事件处理程序来处理所有情况-|2649850|$('#images').delegate('div[class%5E=image]',+'mouseenter+mouseleave',+function(e)+{
+++$('.default').toggle(e.type+===+'mouseleave');
+++$('#cats+p').eq($(this).index()).toggle(e.type+!==+'mouseleave');
});|2649851|编辑|offset|length|style|BOLD|2649852|实际上，您可以通过删除"image1“、"image2”、"image3“来进一步清理它，只需将类命名为"image”。您还可以从#cats中的<p>中删除该类|CODE|2649853|有关修改后的示例，请参阅此处-+http://jsfiddle.net/QVS9X/50/|2649854|编辑2个|2649855|总有一天，你会动态地添加一个cat+div，并想知道为什么事件处理程序不能工作……然后你会重新考虑我的答案:)，然后就像...John真的有一个100%25完整的解决方案。=p|2649856|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/QVS9X/50/^0|0|0|0|0|0|2|0|20|3|0|G|T|0|0|0|4|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|19|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|1A|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|1B|8|@$M|1C|N|1D|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1E|8|@$M|1F|N|1G|O|S]]|9|@]|A|$]]|$1|T|3|U|5|6|7|1H|8|@]|9|@$M|1I|N|1J|1|1K]]|A|$]]|$1|V|3|W|5|6|7|1L|8|@$M|1M|N|1N|O|P]]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1O|8|@]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]]|10|$11|$5|12|13|14|A|$15|16]]]]

<p>First, I'd wrap the target divs in a parent div if they aren't already contained - like such:</p>

<pre><code>&lt;div id="images"&gt;
  &lt;div class="image1"&gt;
    &lt;p&gt;Hover for cat 1&lt;/p&gt;
  &lt;/div&gt;

   etc..
&lt;/div&gt;
</code></pre>

<p>Then you can bind a single event handler to handle all your cases -</p>

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

<p><strong>EDIT</strong></p>

<p>You can actually clean it up much further by removing the "image1", "image2", "image3" and just name the class "image".  You can also remove the class from the <code>&lt;p&gt;</code> in #cats</p>

<p>See here for the revised example - <a href="http://jsfiddle.net/QVS9X/50/" rel="nofollow">http://jsfiddle.net/QVS9X/50/</a></p>

<p><strong>EDIT 2</strong></p>

<p>Someday, you'll add a cat div dynamically and wonder why the event handler isn't working... then you'll revisit my answer :)  And be like... John really had a 100% complete solution. =p</p>


blocks|key|2649894|text|这是我的尝试，将类别文本移动到div元素会让事情变得更简单。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2649895|http://jsfiddle.net/HV8vq/|offset|length|2649896|*+{
++++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"));
+++++++++++});

});|code-block|syntax|javascript|2649897|编辑|style|BOLD|2649898|我不得不说，我从回答和阅读这个问题的其他答案中学到了很多。以下是更新后的响应：|2649899|http://jsfiddle.net/HV8vq/3/|2649900|<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"));
++++});
});|2649901|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|Q|0|0|0|0|2|0|0|0|S|1|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@$D|14|E|15|1|16]]|A|$]]|$1|F|3|G|5|H|7|17|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|18|8|@$D|19|E|1A|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|1B|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1C|8|@]|9|@$D|1D|E|1E|1|1F]]|A|$]]|$1|S|3|T|5|H|7|1G|8|@]|9|@]|A|$I|J]]|$1|U|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|C]]|11|$5|X|Y|Z|A|$10|R]]]]

<p>Here's my attempt, moving the category text to the div elements makes things a little easier.</p>

<p><a href="http://jsfiddle.net/HV8vq/" rel="nofollow">http://jsfiddle.net/HV8vq/</a></p>

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

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

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

});
</code></pre>

<p><strong>Edit</strong></p>

<p>I have to say I've learned alot answering and reading the other answers to this question. Here is an updated response:</p>

<p><a href="http://jsfiddle.net/HV8vq/3/" rel="nofollow">http://jsfiddle.net/HV8vq/3/</a></p>

<pre><code>&lt;div&gt;
  &lt;p id="defaultText"&gt;Default Text&lt;/p&gt;
  &lt;p id="placeholder" style="display:none;"&gt;&lt;/p&gt;
&lt;/div&gt;

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


blocks|key|4265189|text|类似这样的http://jsfiddle.net/QVS9X/51/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4265190|$(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();
++++});
});|code-block|syntax|javascript|4265191|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/QVS9X/51/^0|5|T|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Something like this
<a href="http://jsfiddle.net/QVS9X/51/" rel="nofollow">http://jsfiddle.net/QVS9X/51/</a></p>

<pre><code>$(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();
    });
});
</code></pre>


<p>I was wondering if anyone has any idea on how I could rewrite this simple jquery code to be more efficient. It's of course working fine now but I imagine adding say 10 more items would make the code really big. I thought maybe I could add the classes to arrays and use some kind of loop? Not sure if that's the right approach though.</p>

<p>Here it is on jsfiddle:
<a href="http://jsfiddle.net/QVS9X/42/" rel="nofollow">http://jsfiddle.net/QVS9X/42/</a></p>

<p>and here's a sample of it:
JS:</p>

<pre><code>$(".image1").mouseout(function() {
    $(".default").show();
    $(".cat1").hide();
}).mouseover(function() {
    $(".default").hide();
    $(".cat1").show();
});

$(".image2").mouseout(function() {
    $(".default").show();
    $(".cat2").hide();
}).mouseover(function() {
    $(".default").hide();
    $(".cat2").show();
});
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div class="image1 image"&gt;
    &lt;p&gt;Hover for cat 1&lt;/p&gt;
&lt;/div&gt;
&lt;div class="image2 image"&gt;
    &lt;p&gt;Hover for cat 2&lt;/p&gt;
&lt;/div&gt;
&lt;div class="image3 image"&gt;
    &lt;p&gt;Hover for cat 3&lt;/p&gt;
&lt;/div&gt;
&lt;div class="default"&gt;
    &lt;p&gt;Default Text&lt;/p&gt;
&lt;/div&gt;
&lt;div id="cats"&gt;
    &lt;p class="cat1"&gt;Category 1 text&lt;/p&gt;
    &lt;p class="cat2"&gt;Category 2 text&lt;/p&gt;
    &lt;p class="cat3"&gt;Category 3 text&lt;/p&gt;
&lt;/div&gt;
</code></pre>


Making smarter jQuery code

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想知道是否有人知道我如何重写这个简单的jquery代码以提高效率。当然，它现在运行得很好，但我想象添加10个以上的项目会使代码变得非常大。我想也许我可以将类添加到数组中，并使用某种循环？不过，我不确定这是不是正确的方法。这里是jsfiddle：下面是一个示例: JS：$(".image1").mouseout(fun...

问编写更智能的jQuery代码
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问编写更智能的jQuery代码EN