Question

我有一个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
  });
});

Answer 1

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

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

Updated Fiddle

如果你真的想要，可以使用add使事件成为一行：

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

然而，这可能有点难看。

Answer 2

你可以

$(function() { //run when the DOM is ready
  $(".button-case").click(function() { //use a class, since your ID gets mangled
    //here this refers to the clicked button so 
    $(this).toggleClass("active");
    $(this).next().toggleClass("active"); //add the class to the clicked element
  });
});

#buttons-case {
  max-width: 707px;
  width: 100%;
  margin: 0 auto;
}
.button-case {
  border: 1px solid #8A8A8A;
  color: #8A8A8A;
  font-size: 15px;
  text-align: center;
  line-height: 12px;
  font: 300 15px/0.925"Helvetica Neue", Helvetica, Arial, sans-serif;
}
.btn {
  position: relative;
  display: inline-block;
  width: 169px;
  margin: 9px 21px auto;
  padding: 10px;
  height: 12px;
}
.btn.active {
  height: 60px;
  width: 707px;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 500;
  background: #fff;
  padding-left: 24px;
  padding-top: 16px;
}
.button-case.active {
  text-align: left;
}
.button-holder {
  max-width: 707px;
  margin: 0 auto;
  width: 100%;
  position: relative;
}
p.inner-p {
  display: none;
}
p.inner-p.active {
  display: block;
  position: absolute;
  z-index: 600;
  top: 35px;
  left: 46px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="button-holder">
  <div id="buttons-case">
    <a href="#" class="button-case btn een">GepasteTypografie</a>
    <p class="inner-p een">eerste</p>
    <a href="#" class="button-case btn twee">Grafische elementen</a>
    <p class="inner-p twee">tweede</p>
    <a href="#" class="button-case btn drie">Ga naar</a>
    <p class="inner-p drie">derde</p>
    <a href="#" class="button-case btn vier">Duidelijk werkproces</a>
    <p class="inner-p vier">vierde</p>
    <a href="#" class="button-case btn vijf">Responsive design</a>
    <p class="inner-p vijf">vijfde</p>
    <a href="#" class="button-case btn zes">Gebruiksvriendelijk</a>
    <p class="inner-p zes">zesde</p>
  </div>
</div>

Answer 3

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

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

Answer 4

您可以将所有选择器添加到数组并循环遍历它以绑定您需要的所有内容。像这样：

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

});

注意，这只是一个例子。如果它更好，您实际上可以使用类编写数组，甚至可以使用有关每个绑定的所有元数据来对象进行编写并循环遍历它。

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

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

4 个答案: