Javascript 任何人都可以将jquery代码变小吗

我已经创建了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');
  }
);

});

---

这里是

而不是使用不同的ID。在每个

菜单div

中放置一个公共类，例如.code>.menu，并按如下方式更改jQuery脚本：

$(document).ready(function(){    
    $('.menu').hover(function() {
        $(this).find('.bg-imgsection').toggleClass('displayon');
        $(this).find('#logo .log-bg').toggleClass('log-bg1');
    });
});

---

使用公共处理程序并使用对象根据元素的

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');
  });

});

---

为什么不在html中添加类选择器并像这样使用呢

$(document).ready(function () {
$('.className').hover(function() {
    $('.bg-imgsectionAll').toggleClass('displayon');
    $('#logo .log-bg').toggleClass('log-bg1');
  }
);

---

是的，我相信你能做到

$（文档）.ready（函数（）{
$（'.mymenu_hover_effects'）。悬停(
函数（）{
var show_div=$（this.attr（'data-show-section'）；
$（'..+show_div）.toggleClass（'displayon'）；
$（'#logo.log bg'）.toggleClass（'log-bg1'）；
}
);
});
.displayon{
显示：块；
背景：红色；
}


沃克之家，

克罗伊登米查姆路375号，

萨里，CR0 3HP，

联合王国


中国，

地址在这里


705-707 Vishwa Sadan大厦

9区中心

新德里贾纳克普里

110058，印度


一楼办公室1

蒙帕劳大厦

特里克it托里（塔路）

Msida，MSD1825，
马耳他

您可以使用
$（'div[id^=menu]'）
选择id以'menu'开头的所有
div

由于'bg imgsection'div是'menu'div的第一个子项（根据您的JSFIDLE），因此您可以在事件处理程序中使用此选择器：
$（'：first child'，this）


$（文档）.ready（函数（）{
$（'div[id^=menu]'）。悬停（函数（）{
$（'：first child'，this.toggleClass（'displayon'）；
});
});
div{width:100px；右边距：2px；背景色：#eee；光标：默认值；float:left}
.displayon{背景色：#bcd}

菜单一节#1
菜单2第2部分#2
菜单第三部分#3
菜单第4节#4