有没有办法缩短这个jquery代码？

我有一个jquery脚本，但它太长了（我想） 有没有办法缩短代码？ 代码将类添加到按钮和段落中，以便它们显示自己的文本每个按钮都有自己的文本（段落）

---

我说的是jquery代码；）但是如果需要的话，我也可以更改html和css

$(function() {                       //run when the DOM is ready
  $(".button-case.een").click(function() {  //use a class, since your ID gets mangled
    $(".button-case.een").toggleClass("active"); 
    $("p.inner-p.een").toggleClass("active"); //add the class to the clicked element
  });
  $(".button-case.twee").click(function() {  //use a class, since your ID gets mangled
    $(".button-case.twee").toggleClass("active"); 
    $("p.inner-p.twee").toggleClass("active"); //add the class to the clicked element
  });
  $(".button-case.drie").click(function() {  //use a class, since your ID gets mangled
    $(".button-case.drie").toggleClass("active"); 
    $("p.inner-p.drie").toggleClass("active"); //add the class to the clicked element
  });
  $(".button-case.vier").click(function() {  //use a class, since your ID gets mangled
    $(".button-case.vier").toggleClass("active"); 
    $("p.inner-p.vier").toggleClass("active"); //add the class to the clicked element
  });
  $(".button-case.vijf").click(function() {  //use a class, since your ID gets mangled
    $(".button-case.vijf").toggleClass("active"); 
    $("p.inner-p.vijf").toggleClass("active"); //add the class to the clicked element
  });
  $(".button-case.zes").click(function() {  //use a class, since your ID gets mangled
    $(".button-case.zes").toggleClass("active"); 
    $("p.inner-p.zes").toggleClass("active"); //add the class to the clicked element
  });
});

---

您可以在事件处理程序中使用

this

，以引用引发事件的元素。从那里您可以遍历到DOM来修改所需的元素。试试这个：

$(".button-case").click(function () { 
    $(this).toggleClass("active");
    $(this).next('p').toggleClass("active");
});

如果您确实想：

$(".button-case").click(function () { 
    $(this).add($(this).next()).toggleClass("active");
});

然而，这可能有点难看。

你可以

$（function（）{//在DOM就绪时运行
$（“.button case”）。单击（function（）{//使用类，因为您的ID已损坏
//这里指的是单击的按钮，因此
$（此）.toggleClass（“活动”）；
$（this）.next（）.toggleClass（“active”）；//将类添加到单击的元素中
});
});
按钮盒{
最大宽度：707px；
宽度：100%；
保证金：0自动；
}
.按钮盒{
边框：1px实心#8A8A8A；
颜色：#8A8A8A；
字体大小：15px；
文本对齐：居中；
线高：12px；
字体：300 15px/0.925“Helvetica Neue”，Helvetica，Arial，无衬线；
}
.btn{
位置：相对位置；
显示：内联块；
宽度：169px；
利润率：9px 21px自动；
填充：10px；
高度：12px；
}
.btn.active{
高度：60px；
宽度：707px；
位置：绝对位置；
左：0px；
顶部：0px；
z指数：500；
背景：#fff；
左侧填充：24px；
填充顶部：16px；
}
.button-case.active{
文本对齐：左对齐；
}
.按钮座{
最大宽度：707px；
保证金：0自动；
宽度：100%；
位置：相对位置；
}
p、 内-p{
显示：无；
}
p、 内p活性{
显示：块；
位置：绝对位置；
z指数：600；
顶部：35px；
左：46px；
}

eerste
花呢

德尔德

vierde
vijfde

zesde

您可以将所有选择器添加到数组中，并在其中循环以绑定所需的所有内容。大概是这样的：

$(function() {
    var sels = [$(".button-case.een"), $(".button-case.twee"), /* ... */];

    for (var i = 0, max = sels.length; i < max; i++ {
        var sel = sels[i];
        sel.on('click', function() {/* code */});
    }

});

$（函数（）{
var sels=[$（“.button case.een”），$（“.button case.twee”），/*…*/]；
对于（变量i=0，max=sels.length；i

请注意，这只是一个示例。如果更好的话，您可以使用类甚至对象编写数组，其中包含关于每个绑定的所有元数据，并通过它进行循环

---

您还可以将此方法与其他答案中的优化结合起来。

创建一个用于切换的函数，并向该函数发送类信息：

function toggleFunc(data) {
    $(".button-case." + data).click(function() {
    $(".button-case." + data).toggleClass("active"); 
    $("p.inner-p." + data).toggleClass("active");
});

$(function() {
    toggleFunc('een');
    toggleFunc('twee');
    toggleFunc('drie');
    toggleFunc('vier');
    toggleFunc('vijf');
    toggleFunc('zes');
});

---

这两个答案都很有效。我将使用另一个。因为它稍微短了一点，谢谢！你忘了p选择器吗？@Fractaliste在这种情况下，它不是必需的。但是我通常包括它们来阻止将来的DOM更改破坏JS代码。