如何对同名按钮使用不同的功能?
问题描述:
我想为我的按钮使用相同的名称,但我想单击一个按钮并显示该按钮的解决方案。例如,我点击第一个按钮(任务)显示第一个解决方案(解决方案)。我想这样做,因为我想要很多任务 - 解决方案对。感谢您的答案。如何对同名按钮使用不同的功能?
这里是我的代码:
<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>
答
可以遍历父元素,并找到其中的.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>
答
使用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>
答
你必须引用特定的按钮点击与$(this)
:
$('button').click(function() {
$(this).siblings('.solution').slideToggle("slow");
});
这将创建一个可以适用于任何数量的按钮解决方案 - 对一个普遍规律,但是你应该确保这些类的组合不会出现在您网站上的任何其他地方,可能是通过将范围限制到某个父类最简单的方式。
答
您可以使用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>
这个工作,但仅仅是一个实现的更复杂的方法是什么'兄弟姐妹()'做 – TheThirdMan
你是正确的,但是这个代码**将工作**,即使'.solution'元素在另一个包装元素中。在这种情况下,“兄弟姐妹()”解决方案将不起作用。 – Dekel