.toggle() function
.toggle() function
我想将toggle函数分别应用于这两个按钮。然而,当我使用下面的代码时,它会在每个按钮下切换两个内容。我如何将它们分开,以便当我单击第一个按钮时,只有它下面的内容才会被切换?
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>
<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>
<script>
$("button").click(function () {
$("p").toggle();
});
</script>
</body>
</html>
简单:使用nextUntil()
将选择所有下一个元素,直到达到匹配的元素(在您的情况下是下一个button
):
jsFiddle演示
$("button").click(function () {
$(this).nextUntil('button').toggle();
});
试试这个:
$("button").click(function () {
$(this).nextAll("p:lt(2)").toggle();
});
http://jsbin.com/orujav
为什么有两个段落标记?制作您的HTML:
<button>Toggle</button>
<p>Hello</p>
<button>Toggle</button>
<p>Hello</p>
和您的jQuery:
$("button").click(function () {
$(this).next('p').html( ($(this).next('p').html()=='Hello')?'Good Bye':'Hello');
});
jsFiddle示例
相关文章:
- jQuery/Javascript.toggleClass/.classList.toggle的特殊行为
- 直接在函数声明上使用function.prototype.bind
- jQuery:.click(function(){(element),collapse('show',f
- 如果连接类型为none,则Javascript Function Only警报
- onLoad function phonegap android
- reducers在redux中得到Function not Object,what'it’他错了
- WIll window.addEventListener(“加载”,function(),false);等待浏览器自动填
- $(document).ready和jQuery(function($)不工作;jQuery已定义,但脚本尚未定义;t进
- Javascript onunload function
- 在init function()中调用getElementById(“..”),而不是想用它做点什么的函数
- spyOn:应为间谍,但得到了Function
- (typeof variable === “function”) 和 jQuery.isFunction() 有什么区别
- this内部的值返回this.each(function(){})
- Toggle Switch在包含ng model和ng repeat之后不进行切换
- 如何在JavaScript中创建类似于something.function()的函数
- 如何通过 Function.prototype.apply() 更改调用函数的参数
- Toggle Javascript
- 控制台中的“function floor(){[本机代码]}”是什么
- .toggle() function
- Javascript function .toggle start on hide?