Question

如何使用jQuery选择器隐藏/显示html节点？见小提琴here。目的是通过单击第一个按钮隐藏text1段，并通过单击另一个按钮隐藏其他文本。现在，节点被隐藏但随后重新出现。请解释一下？

这是html部分

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/test.js"></script>
</head>
<body>
<p id="text1">text1</p>
<p id="text2">text2</p>
<form>
<input type="submit" id="hide1"></input>
<input type="submit" id="hide2"></input>
</form>

</body>
</html>

这里是JavaScript / jQuery代码：

$(document).ready(function(){
    $("#hide1").click(function(){
        $("#text1").hide();
        $("#text2").show();
    });
    $("#hide2").click(function(){
        $("#text2").hide();
        $("#text1").show();
    });
});

Answer 1

将type="submit"更改为type="button"。否则，它会提交表格。

Answer 2

您可以将类型更改为按钮，或者如果您有理由将其保留为提交，则可以执行以下操作：

$(document).ready(function(){
    $("#hide1").click(function(e){
        $("#text1").hide();
        $("#text2").show();
        e.preventDefault();
    });
    $("#hide2").click(function(e){
        $("#text2").hide();
        $("#text1").show();
        e.preventDefault();
    });
});

您正在提交基本上重新加载页面的表单。 e.preventDefault（）会阻止该操作。

Answer 3

您在html中使用表单标记并使用提交类型的按钮，因此它会回发页面，因此您会看到标签在发回后再次显示这将解决您的问题（将按钮类型更改为按钮）

<body>
<p id="text1">text1</p>
<p id="text2">text2</p>
<form>
<input type="button" value='button1' id="hide1"></input>
<input type="button" value='button2' id="hide2"></input>
</form>
</body>

Answer 4

这里有几个选项。

不要提交表格。您可以通过不使用提交按钮来完成此操作。为此，请将输入类型设置为button，而不是submit
```
<input type="button" id="hide1" value="hide"> <!-- note: input close tag removed/unnecessary —>
```
您还可以使用<button>元素：
```
<button type="button" id="hide1">hide</button>
```

单击按钮后停止执行（fiddle）。这可以通过阻止事件的默认操作或从函数返回false来实现：

$(document).ready(function(){
    $("#hide1").click(function(evnt){  // make sure to localize/name the event argument
        $("#text1").hide();
        $("#text2").show();
        return false;  // or evnt.preventDefault()
    });
    $("#hide2").click(function(evnt){  // make sure to localize/name the event argument
        $("#text2").hide();
        $("#text1").show();
        return false;  // or evnt.preventDefault()
    });
});

Answer 5

提交按钮的默认行为是发布表单。因此，要么必须使用preventDefault（）方法，要么如果要将这些按钮保留为提交按钮，则可以返回false以防止表单发布。

$(document).ready(function(){
   $("#hide1").click(function(e){
       $("#text1").hide();
       $("#text2").show();
       return false;
   });
   $("#hide2").click(function(e){
       $("#text2").hide();
       $("#text1").show();
       return false;
   });
});

Answer 6

默认情况下，提交输入类型将如下所示：提交表单，导致页面刷新。有一种方法可以防止这种默认行为：

// event.preventDefault();
$("#hide1").click(function(event){
    event.preventDefault();

    // continue
});

preventDefault（）将阻止触发默认行为，在这种情况下：提交表单。

使用jQuery（JavaScript）隐藏/显示无法正常工作？

6 个答案: