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

Question

我有一个jquery脚本,但它很长(我认为)有没有办法让这段代码更短？代码将类添加到按钮和段落,以便它们显示自己的文本,每个按钮都有自己的文本(段落).

---

的jsfiddle

我在谈论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
  });
});

Answer 1

您可以this在事件处理程序中使用它来引用引发事件的元素.从那里你可以遍历DOM来修改所需的元素.试试这个:

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

更新小提琴

add如果你真的想要,你可以通过使用事件使它成为一行:

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

然而,这可能有点不雅观.