Question

我想在我的按钮上使用相同的名称，但我想单击一个按钮并显示按钮的解决方案。例如，我点击第一个按钮（任务）只显示第一个解决方案（解决方案）。我想做，因为我想要很多任务 - 解决方案对。谢谢你的回答。

这是我的代码：

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
    <div class="task">
        <button>Task</button>
        <div class="solution">Solution</div>
    </div>
    <div class="task">
        <button>Task2</button>
        <div class="solution">Solution2</div>
    </div>
</body>

<script>

    $(document).ready(function () {
        $("button").click(function () {
            $(".solution").slideToggle("slow");
        });

    });
</script>

Answer 1

使用jQuery的.siblings函数：

 $(document).ready(function() {
   $("button").click(function() {
     $(this).siblings(".solution").slideToggle("slow");
   });

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="task">
  <button>Task</button>
  <div class="solution">Solution</div>
</div>
<div class="task">
  <button>Task2</button>
  <div class="solution">Solution2</div>
</div>

Answer 2

您必须引用点击$(this)的具体按钮：

$('button').click(function () {
  $(this).siblings('.solution').slideToggle("slow");
});

这将创建一个可应用于任意数量的按钮解决方案对的通用规则，但是您应该确保这些类的组合不会出现在您网站的任何其他位置，可能最简单的方法是将范围限制为某个父母班。

Answer 3

您可以遍历父元素并在其中找到.solution：

$(document).ready(function () {
  $("button").click(function () {
    $(this).parent().find('.solution').slideToggle("slow");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="task">
        <button>Task</button>
        <div class="solution">Solution</div>
    </div>
    <div class="task">
        <button>Task2</button>
        <div class="solution">Solution2</div>
    </div>

Answer 4

您可以使用jQuery next：

＆＃13;

$(function () {
  $("button").click(function () {
    $(this).next().slideToggle("slow");
  });
});

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<div class="task">
    <button>Task</button>
    <div class="solution">Solution</div>
</div>
<div class="task">
    <button>Task2</button>
    <div class="solution">Solution2</div>
</div>

＆＃13;

如何使用不同的功能同名按钮？

4 个答案: