Question

我是Jquery世界的新手，所以有人可以帮助我理解我的做$("#dothis").html("hit");让内容只闪烁而不是简单地显示？我认为这个功能正在重复自我，这是导致它的原因。

html代码：

        <form>
        <select class="plcardFirst">
          <option selected value="">-- Choose One --</option>
          <option value="1/11">A</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          <option value="10">J</option>
          <option value="10">Q</option>
          <option value="10">K</option>
            </select>
        <select class="plcardSecond">
          <option selected value="">-- Choose One --</option>
          <option value="1/11">A</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          <option value="10">J</option>
          <option value="10">Q</option>
          <option value="10">K</option>
            </select>
        <select class="dlCard">
          <option selected value="">-- Choose One --</option>
          <option value="1/11">A</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          <option value="10">J</option>
          <option value="10">Q</option>
          <option value="10">K</option>
            </select>
            <input type="submit" value="Submit" id="Submit">
        </form>
    <div id="dothis"> do this </div>

脚本：

     <script type="text/javascript">
           var valueFirst;
           var valueSecond;
           var dlCard;
          $(document).ready(function () {
            $(".plcardFirst").change(function() {
               valueFirst = $( ".plcardFirst" ).val();//player first card;
            });
            $(".plcardSecond").change(function() {
               valueSecond = $( ".plcardSecond" ).val();//player second card
            });
            $(".dlCard").change(function() {
              dlCard = $( ".dlCard" ).val();//dealer card
            });
            $("#Submit").click(function(){
              $("#dothis").html("hit");
            });
        }); 
   </script>

Answer 1

它闪烁，因为您正在使用提交按钮而您没有取消提交操作，因此页面提交表单并重新加载页面。

$("#Submit").click( function (e) {
    e.preventDefault();  //cancel the click
    $("#dothis").html("hit");
});

Answer 2

您必须取消活动，不要提交表格：

$("#Submit").click(function(event){
    $("#dothis").html("hit");
    return false;
});

或者，您只需删除＆lt; form＆gt;如果您不打算通过PHP处理数据，那么就不会再发生这种情况了。

Answer 3

您的页面再次加载，因为它是一个表单，您有一个type = submit的按钮。您需要通过添加e.preventDefault（）来阻止其正常功能。试试这个：

<script>
$("#Submit").click(function(e) {
    e.preventdefault();
    $("#dothis").html("hit");
});
</script>

Answer 4

您正在提交表单，因此页面会重新加载/刷新。您可以更改按钮类型，然后尝试

<input type="button" value="Submit" id="Submit">

Answer 5

如果您要提交表单，则会刷新页面，并获得初始div内容。

如果您不想提交表单，则必须在函数中返回false。

$("#Submit").click(function () {
            $("#dothis").html("hit");
            return false;
        });

为什么我的<div>内容</div>闪烁？

5 个答案: