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).parent().next().show();

Answer 2

您需要使用：

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

当你在<div />内时，你需要遍历一个树。

Answer 3

如果您知道DOM中的确切位置，您可以执行$('div:nth-child(2)')之类的操作来选择元素，但这将非常脆弱 - 对标记的更改将有可能破坏您的脚本。

Answer 4

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

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

Answer 5

您的代码无效，因为$(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>

演示：http://jsfiddle.net/NXM7w/

Answer 6

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

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

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

function spoiler(div1) {
    $(div1).parent().next().toggle();
}

希望能帮到你。

从输入切换下一个div

6 个答案: