我创建了jquery代码，但这非常大。请可以制作小而动态的代码。
Jquery代码： -
$(document).ready(function () {
$('#menuone').hover(
function() {
$('.bg-imgsection').toggleClass('displayon');
$('#logo .log-bg').toggleClass('log-bg1');
}
);
$('#menutwo').hover(
function() {
$('.bg-imgsection2').toggleClass('displayon');
$('#logo .log-bg').toggleClass('log-bg1');
}
);
$('#menuthree').hover(
function() {
$('.bg-imgsection3').toggleClass('displayon');
$('#logo .log-bg').toggleClass('log-bg1');
}
);
$('#menufour').hover(
function() {
$('.bg-imgsection4').toggleClass('displayon');
$('#logo .log-bg').toggleClass('log-bg1');
}
);
});
答案 0 :(得分：3)
使用公共处理程序并使用对象根据元素的id引用类。
$(document).ready(function() {
// object for refering the class based on id
var cls = {
menuone: 1,
menutwo: 2,
menuthree: 3,
menufour: 4
};
$('#menuone,#menutwo,#menuthree,#menufour').hover(function() {
// generate classname using id and the object
$('.bg-imgsection' + cls[this.id]).toggleClass('displayon');
$('#logo .log-bg').toggleClass('log-bg1');
});
});
答案 1 :(得分：0)
而不是使用不同的ID。把一个普通的课说。.menu添加到每个menu div并更改jQuery脚本，如下所示：
$(document).ready(function(){
$('.menu').hover(function() {
$(this).find('.bg-imgsection').toggleClass('displayon');
$(this).find('#logo .log-bg').toggleClass('log-bg1');
});
});
答案 2 :(得分：0)
为什么不在html中添加类选择器并像这样使用
$(document).ready(function () {
$('.className').hover(function() {
$('.bg-imgsectionAll').toggleClass('displayon');
$('#logo .log-bg').toggleClass('log-bg1');
}
);
答案 3 :(得分：0)
确定你可以通过这样做。
$(document).ready(function () {
$('.mymenu_hover_effects').hover(
function() {
var show_div=$(this).attr('data-show-section');
$('.'+show_div).toggleClass('displayon');
$('#logo .log-bg').toggleClass('log-bg1');
}
);
});.displayon{
display:block;
background:red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="banner-area">
<div id="logo">
<div class="log-txt animated fadeInUp"><img src="images/big-logo.png" alt=""></div>
<div class="log-bg"></div>
</div>
<div id="menuone" data-show-section="bg-imgsection" class="mymenu_hover_effects">
<div class="bg-imgsection animated fadeIn"><img src="images/our-group.png" alt=""></div>
<div class="contant-banner-area animated fadeInUp a1">
<a href="index.html">
<h1>Our Group Companies</h1>
<p>Our complete communication management solution has
over 14 components to enhance any business operation.</p>
</a>
</div>
</div>
<div id="menutwo" data-show-section="bg-imgsection2" class="mymenu_hover_effects">
<div class="bg-imgsection2 animated fadeIn"><img src="https://cdn.img42.com/9f63b03c6c1aa61a04710be5316a3275.png" alt=""></div>
<div class="contant-banner-area animated fadeInUp a2">
<a href="#">
<h1>About Asergis Group</h1>
<p>With over 15 years’ experience, the Asergis Group has a proven track record in the telecoms’ industry. We take great pride in what we do and we combine a wealth of global expertise and first-rate customer care to offer competitively priced products and services.</p>
</a>
</div>
</div>
<div id="menuthree" data-show-section="bg-imgsection3" class="mymenu_hover_effects">
<div class="bg-imgsection3 animated fadeIn"><img src="images/social.png" alt=""></div>
<div class="contant-banner-area animated fadeInUp a3">
<div class="soical">
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-rss" title="blog"></i></a>
</div>
<a href="#">
<h1>Social Responsibility</h1>
<p>We aim to make a positive impact on society and leave a
small footprint on the environment.</p>
</a>
</div>
</div>
<div id="menufour" data-show-section="bg-imgsection4" class="mymenu_hover_effects">
<div class="bg-imgsection4 animated fadeIn"><img src="images/investor.png" alt=""></div>
<div class="contant-banner-area animated fadeInUp a4">
<a href="#">
<h1>Investor Relations</h1>
<p>Our investors are our greatest asset. Our success relies on our
ability to attract, develop.</p>
</a>
</div>
</div>
<div id="menufive">
<div class="bg-imgsection5 animated fadeIn"><img src="images/media.png" alt=""></div>
<div class="contant-banner-area animated fadeInUp a5">
<a href="#">
<h1>Media/News</h1>
<p>We aim to make a positive impact on society and leave a
small footprint on the environment.</p>
</a>
</div>
</div>
<div id="menusix">
<div class="bg-imgsection6 animated fadeIn"><img src="images/careers.png" alt=""></div>
<div class="contant-banner-area animated fadeInUp a6">
<a href="#">
<h1>Careers</h1>
<p>Our natural resources play an essential role in
people’s everyday lives.</p>
</a>
</div>
</div>
<div id="menuseven">
<div class="bg-imgsection7 animated fadeIn"><img src="images/cantact.png" alt=""></div>
<div class="contant-banner-area animated fadeInUp a7">
<a href="#">
<h1>Contact Us</h1>
<p>Asergis have made significant investment and
expansion into their contacts.</p>
</a>
<div class="contact-div">
<div class="flag">
<span id="uk" class="scaleimg"><img src="images/uk-flag.jpg" alt=""></span>
<span id="china"><img src="images/china-flag.jpg" alt=""></span>
<span id="india"><img src="images/india-flag.jpg" alt=""></span>
<span id="malta"><img src="images/malta-flag.jpg" alt=""></span>
</div>
<div class="cont-address">
<ul class="uk">
<li><i class="fa fa-map-marker"></i> Walker House, <br>
375 Mitcham Road, Croydon, <br>
Surrey, CR0 3HP, <br>
United Kingdom</li>
</ul>
<ul class="china">
<li><i class="fa fa-map-marker"></i> China, <br>
Address go here</li>
</ul>
<ul class="india">
<li><i class="fa fa-map-marker"></i> 705-707 Vishwa Sadan Building <br>
9 District Centre <br>
Janak Puri, New Delhi <br>
110058, India</li>
</ul>
<ul class="malta">
<li><i class="fa fa-map-marker"></i> First Floor Office 1 <br>
Mompalao Buildings <br>
Triq it Torri (Tower Road) <br>
Msida , MSD 1825, <br> Malta</li>
</ul>
</div>
</div>
</div>
</div>
<div id="menueight">
<div class="bg-imgsection8 animated fadeIn"><img src="images/careers.png" alt=""></div>
<div class="contant-banner-area animated fadeInUp a8">
<a href="#">
<h1>Global PoP Locations</h1>
<p>Strategically placed PoPs allow Asergis to give you a wider choice of new and highly competitive services.</p>
</a>
</div>
</div>
<div id="menunine">
<div class="bg-imgsection9 animated fadeIn"><img src="images/careers.png" alt=""></div>
<div class="contant-banner-area animated fadeInUp a9">
<a href="#">
<h1>Resellers</h1>
<p>Sell the full range of Asergis Telecom products to your customers. As an Asergis Telecom Reseller.</p>
</a>
</div>
</div>
</div>
您需要在HTML中添加'data-'属性，然后在Jquery中获取该属性，以设置您要为特定div设置的类或属性。在你的例子中，我为前四个带有id menu *的元素做了这个。你可以根据自己的需要修改它。
答案 4 :(得分：0)
您可以使用$('div[id^=menu]')选择ID以“菜单”开头的所有div。
因为'bg-imgsection' div是'menu' div的第一个孩子（根据你的JSFiddle），你可以使用这个选择器事件处理程序：$(':first-child', this)。
$(document).ready(function() {
$('div[id^=menu]').hover(function() {
$(':first-child', this).toggleClass('displayon');
});
});div { width:100px; margin-right:2px; background-color:#eee; cursor:default; float:left }
.displayon { background-color:#bcd }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menuone">Menu One<div class="bg-imgsection1">Section #1</div></div>
<div id="menutwo">Menu Two<div class="bg-imgsection2">Section #2</div></div>
<div id="menuthree">Menu Three<div class="bg-imgsection3">Section #3</div></div>
<div id="menufour">Menu Four<div class="bg-imgsection4">Section #4</div></div>