Question

我有这段代码：

$(document).ready(function(){
    $(".challengeform").hide(); 
    $("#sendchallengebutton").hide();   
    $("#successchallenge").hide();
    console.log("Hide all");
});

$("#challengebutton").click(function() {
    $(".challengeform").show(); 
    $("#sendchallengebutton").show();   
    console.log("Unhide some");
});

简单。但是当我点击挑战按钮时，它会显示我希望它显示的所有内容大约1秒钟，然后再次隐藏它。在控制台日志中，我得到“全部隐藏”，然后当我点击#challenge按钮时，它会显示“取消隐藏”，然后再次“隐藏所有”。我只是想知道这段代码是怎么回事。我想我可以自己找一条替代路线，但我想了解原因。如果有人知道我会喜欢这个帮助

这是我的整个html页面。它在rails中，因此它确实包含erb

<h1>Profile</h1>

<h1><%= @user.username %></h1>

<h1>Level: <%= @summonerlevel %></h1>


<a href="" id="challengebutton">Challenge</a>

<%= form_tag("../challenges", method: "post", class:"challengeform") do %>
<%= label_tag(:q, "Start time") %>
<%= select_tag(:starttime, options_for_select([["6am", 6], ["7am", 7], ["8am", 8], ["9am", 9], ["10am", 10], ["11am", 11], ["12pm", 12], ["1pm", 13], ["2pm", 14], ["3pm", 15], ["4pm", 16], ["5pm", 17], ["6pm", 18], ["7pm", 19], ["8pm", 20], ["9pm", 21], ["10pm", 22], ["11pm", 23], ["12am", 24], ["1am", 1], ["2am", 2], ["3am", 3], ["4am",4 ], ["5am", 5]], selected: :option )) %>
<%= label_tag(:q, "End time") %>
<%= select_tag(:endtime, options_for_select([["6am", 6], ["7am", 7], ["8am", 8], ["9am", 9], ["10am", 10], ["11am", 11], ["12pm", 12], ["1pm", 13], ["2pm", 14], ["3pm", 15], ["4pm", 16], ["5pm", 17], ["6pm", 18], ["7pm", 19], ["8pm", 20], ["9pm", 21], ["10pm", 22], ["11pm", 23], ["12am", 24], ["1am", 1], ["2am", 2], ["3am", 3], ["4am",4 ], ["5am", 5]], selected: :option )) %>
    <%= hidden_field_tag :challengeuser, @user.username %>
<% end %>
<a href="" id="sendchallengebutton">Send Challenge</a>
<p id="successchallenge">Challenge Sent!</p>


<script type="text/javascript">
    $(document).ready(function(){
        $(".challengeform").hide(); 
        $("#sendchallengebutton").hide();   
        $("#successchallenge").hide();
        console.log("Hide all");
    });

    $("#challengebutton").click(function() {
        $(".challengeform").show(); 
        $("#sendchallengebutton").show();   
        console.log("Unhide some");
    });



</script>

Answer 1

这是因为href标记质询按钮导致页面重新加载。

您需要将挑战按钮链接更改为：

<a  id="challengebutton" href="#" onclick="return false">Challenge</a>

以下是您的代码的工作原理：http://jsfiddle.net/jbekjn4o/

Answer 2

您需要在点击事件中返回false。

$("#challengebutton").click(function() {
    $(".challengeform").show(); 
    $("#sendchallengebutton").show();   
    console.log("Unhide some");
    return false;
});

由于#challengebutton是一个链接，点击它会导致重新加载页面（空href属性）

JQuery也调用了文档onload

2 个答案: