$(this) click 事件中的混淆

Question

出于某种原因，我必须将纯 js 与 jquery 一起使用。我有这样的标签

<a onclick="openClose()">Click</a>
<div class="spoilermain">content</div>

这是我的 js

    function openClose(){
        $('.spoilertop').next('.spoilermain').toggle();
    }

问题是如果有多个扰流板，那么所有的都会被切换。在这种情况下如何使用 $(this) ？我知道我可以选择 a 然后使用 $(this) 但由于某种原因我必须触发 openClose()。

Answer 1

可以去掉onclick事件，添加open-close类

<a class=".open-close">Click</a>

然后只需调用您的脚本：

$('.open-close').click(function(){
        $(this).next('.spoilermain').toggle(); 
});

Answer 2

在函数调用时将其作为参数传递

html代码

<a onclick="openClose(this)">Click</a>
<div class="spoilermain">content</div>

javascript 代码

function openClose(ele){
        $(ele).next('.spoilermain').toggle();
    }

Answer 3

这个呢？将“this”作为参数传递给 html 中的 onclick 函数处理程序，然后您可以稍后在函数中使用它

<a onclick="openClose(this)">Click</a>
    <div class="spoilermain">content</div>

js

function openClose(obj){
    $(obj).next('.spoilermain').toggle();
  // this is available here
}

演示：

function openClose(obj){
    $(obj).next('.spoilermain').toggle();
  // this is available here
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a onclick="openClose(this)">Click</a>
    <div class="spoilermain">content</div>