从输入切换下一个div

Question

我想在输入后切换第一个div

可能吗？

我试过了

<script type="text/javascript">
function spoiler() {
    $(this).next().show();
}
</script>

<div>
       <input value="Show/Hide" style="" onclick="spoiler();" type="button"/>
</div>
<div style="display:none;">
    Text
</div>

我不能使用类或ID

Answer 1

您的代码无效，因为$(this)没有引用您的按钮。此外，.next()在按钮后面查找元素，该元素不存在。您正在寻找该按钮的父元素之后的元素。

此外，不是使用onclick绑定事件，而是使用JavaScript完全绑定它：

$(document).ready(function() {
    $('input[value="Show/Hide"]').click(function() {
        $(this).parent().next('div').toggle();
    });
});​

然后，您可以简化HTML：

<div>
   <input value="Show/Hide" type="button" />
</div>

<div style="display:none;">
    Text
</div>​

但是：ぁzxswい

Answer 2

试一试：

http://jsfiddle.net/NXM7w/

Answer 3

你需要使用：

$(this).parent().next().show();

当你在$(this).parent().next().show();里面时，你需要在一个地方遍历树。

Answer 4

如果您知道DOM中的确切位置，您可以执行类似<div />的选择元素，但这将非常脆弱 - 更改标记将有可能破坏您的脚本。

Answer 5

因为next（）引用div中的下一个元素，而不是下一个父div

使用parent（）。next（）。show（）

Answer 6

您正在引用全局变量'this'当前使用它的方式。让你的DIV通过自己然后你可以很容易地在那里工作：

$('div:nth-child(2)')

然后你的JS函数看起来像这样：

<div>
       <input value="Show/Hide" style="" onclick="spoiler(this)" type="button"/>
</div>
<div style="display:none;">
    Text
</div>

希望能帮到你。