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

我想为我的按钮使用相同的名称，但我想单击一个按钮并显示该按钮的解决方案。例如，我点击第一个按钮（任务）显示第一个解决方案（解决方案）。我想这样做，因为我想要很多任务 - 解决方案对。感谢您的答案。如何对同名按钮使用不同的功能？

这里是我的代码：

<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>

来源

2016-08-01 Trencsik Márkó

可以遍历父元素，并找到其中的.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>

来源

2016-08-01 19:05:42 Dekel

这个工作，但仅仅是一个实现的更复杂的方法是什么'兄弟姐妹（）'做 – TheThirdMan

你是正确的，但是这个代码**将工作**，即使'.solution'元素在另一个包装元素中。在这种情况下，“兄弟姐妹（）”解决方案将不起作用。 – Dekel

使用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>

来源

2016-08-01 19:06:08

你必须引用特定的按钮点击与$(this)：

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

这将创建一个可以适用于任何数量的按钮解决方案 - 对一个普遍规律，但是你应该确保这些类的组合不会出现在您网站上的任何其他地方，可能是通过将范围限制到某个父类最简单的方式。

来源

2016-08-01 19:06:14 TheThirdMan

您可以使用jQuery next：

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

<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>

来源

2016-08-01 19:10:04 gaetanoM

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

回答

相关问题