Question

我确定我错过了一些明显但我无法弄明白的东西。我所做的只是根据用户在输入文本字段中输入的数字来更改图像。一个图像为0，一个图像为1，一个图像为任何其他数字。这是我的代码：

HTML：

<div>
    <p>Items in cart:</p>
    <form id="cartform">
        <input type="text" name="amt">
        <input type="submit" value="Submit">
    </form>
    <br/>
    <br/>
    <img id="cart" src="cartempty.jpg" />
</div>

JQUERY：

$(document).ready(function() {
        $("#cartform").submit(function() {
                var howmany = $("input[name='amt']").val();
                if (howmany == 1) {
                    $("#cart").attr("src", "cart1.png");
                } else if (howmany == 2) {
                    $("#cart").attr("src", "cart2.png");
                } else {
                    $("#cart").attr("src", "cartempty.png");
                }
            }
        });

这是：http://codepen.io/kaisle/pen/BKrfL

谢谢！

Answer 1

您正在使用submit操作，该操作会在您的javascript运行后重新加载页面。您需要在提交事件上preventDefault()。请参阅下文或更新CodePen。

$(document).ready(function() {
  $("#cartform").on("submit", function(e) {
    var howmany = $("input[name='amt']").val();
    if (howmany == 1) {
     $("#cart").attr("src","http://s29.postimg.org/3t9we474j/cart1.png")
    } else {
     $("#cart").attr("src","http://s29.postimg.org/3t9we474j/cart2.png")
    }
    e.preventDefault();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <p>Items in cart:</p>
  <form id="cartform">
        <input type="text" name="amt"><input type="submit" value="Submit" />
  </form>
  <br/><br/>
  <img id="cart" src="http://s18.postimg.org/wn2lejomt/cartempty.png" />
</div>

Answer 2

您在document.ready函数末尾缺少});。
if else条件中有额外的}。删除它。
您需要添加e.preventDefault();
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>这必须添加到文档的<head>部分，以便让jquery库在页面上运行。

尝试以下代码：

$(document).ready(function() {
  $("#cartform").on("submit", function(e) {
   var howmany = $("input[name='amt']").val();
   if (howmany == 1) {
     $("#cart").attr("src","http://s29.postimg.org/3t9we474j/cart1.png")
  } else {
    $("#cart").attr("src","http://s29.postimg.org/3t9we474j/cart2.png")
  }
  e.preventDefault();
  });
});

Answer 3

您无需使用表单并提交更改图片。使用适用于onclick事件的简单函数。

<div>
  <p>Items in cart:</p>

        <input type="text" />
        <input id="theButton" type="button" value="Submit" onclick="changeImage();"/>

  <br/><br/>
  <img id="cart" src="http://s18.postimg.org/wn2lejomt/cartempty.png"/>
</div>

和

function changeImage()
{
    var howmany = $("input[name='amt']").val();
    $("#cart").attr("src","http://s29.postimg.org/3t9we474j/cart" + howmany + ".png");
}

检查：http://codepen.io/anon/pen/rdeqj

根据文本输入字段更改图像

3 个答案: