Question

问题编辑：

所以，我可能没有以最好的方式提出这个问题：

X是来自divs的类名：

function functionName(X) {
        $('h2.X').click(function(){
    $(this).parent().find('div.X').slideToggle("slow");
});

    <h2 class="divName" onclick="functionName(X)">Title</h2>
    <div class="divName">
    <p> description </p>
    </div>

    <h2 class="divName2" onclick="functionName(X)">Title</h2>
    <div class="divName2">
    <p> description </p>
    </div>

嗯，对于那些不理解的人，只是不要贬低。非常感谢：/

我们这样说吧：

 $('h2.divName').click(function(){
        $(this).parent().find('div.divName').slideToggle("slow");
 });

        <h2 class="divName">Title</h2>
        <div class="divName">
        <p> description </p>
        </div>


        <h2 class="divName2">Title</h2>
        <div class="divName2">
        <p> description </p>
        </div>

        <h2 class="divName3">Title</h2>
        <div class="divName3">
        <p> description </p>
        </div>

我想复制手风琴以使用所有div ...

Answer 1

我建议您仔细阅读jQuery的文档，因为我认为您忽略了这一点。

给出以下标记：

<h2 class="accTrigger">Title</h2>
<div class="accTarget">
    <p> description </p>
</div>
<h2 class="accTrigger">Title</h2>
<div class="accTarget">
    <p> description </p>
</div>

你可以这样写：

$("h2.accTrigger").click(function(event){
    $(this).next("div.accTarget").slideToggle();
});

你在这里做的是为触发下一个div的可见性的所有h2元素创建一个事件处理程序。

这样可以让你做到你想要的同时将Javascript从你的页面中移除，这是你应该努力做的事情。

现在推荐的方法是使用事件委托，减少事件处理程序的数量，从而减少内存使用量。

重写您的标记如下：

<div class="accordion">
    <h2>Title</h2>
    <div>
        <p> description </p>
    </div>
    <h2>Title</h2>
    <div>
        <p> description </p>
   </div>
</div>

允许你编写这样的代码：

$("div.accordion").on("click", "h2", function(event){
    $(this).next("div").slideToggle();
});

编写起来非常简单。这里发生的是jQuery每个div的实例只创建一个eventHandler，页面上有类accordion。

eventHandler正在侦听从其子节点冒出的任何点击事件，如果其中一个是h2元素，那么它会将该函数的上下文传递给该元素并切换下一个div的可见性。

在编写Javascript并真正学习基础知识时，尝试了解自己在做什么非常重要。 Javascript是网络中最重要的语言，应该被视为一流的语言。

Answer 2

这就是你要找的东西

function acc(el){
   $('.'+el).slideToggle();
}

        <h2 class="hName" onclick="acc('d1');">Title1</h2>
        <div class="divName d1">
          <p> description1 </p>
        </div>

        <h2 class="hName" onclick="acc('d2');">Title2</h2>
        <div class="divName d2">
          <p> description2 </p>
        </div>

        <h2 class="hName" onclick="acc('d3');">Title3</h2>
        <div class="divName d3">
          <p> description3 </p>
        </div>

<强> demo jsBin

Answer 3

您可以传递this并将其捕获为$（this），以获取对this引用的调用对象的引用，而不是使用 div-class 。首先。尝试传递this并查看您在console.log中获得的内容

获取在函数中使用的类（jQuery）

3 个答案: