Question

下面是我正在学习构建的meme生成器的jQuery。基本上每当用户输入一个URL并将其删除时，原始默认图像就会消失，如果用户删除了他们的输入，我正在努力使图像恢复到默认状态。

var main = function() {

  $('#top-text').keyup(function() {
    var top = $(this).val();
    $('.top-caption').text(top);
});
  $('#bottom-text').keyup(function() {
    var bottom = $(this).val();
    $('.bottom-caption').text(bottom)
});
  $('#image-url').keyup(function() {
    var image = $(this).val();
    $('div.meme > img').attr('src',image);
 });
};

$(document).ready(main);

这里的特定代码是我无法弄清楚如果用户删除其URL，如何重新加载默认图像。

$('#image-url').keyup(function() {
    var image = $(this).val();
    $('div.meme > img').attr('src',image);

这是相应的HTML

<div class="header">
  <div class="container">
    <img src="pikachulollipop.gif">
    <h1>Cal's Meme Generator</h1>
  </div>
</div>
<div class="main">
  <div class="container">
    <div class="row">
      <div class="col-md-6">

        <div class="meme thumbnail">
          <img src="pancham.png">
          <h1 class="top-caption">U say something?</h1>
          <h1 class="bottom-caption">Deal with it</h1>
        </div>

      </div>
      <div class="col-md-6">

        <div class="tool">
          <h2>Create a meme</h2>
          <form role="form">
            <div class="form-group">
              <label>Image URL</label>
              <input id="image-url" type="text" class="form-control">
            </div>
            <div class="form-group">
              <label>Top text</label>
              <input id="top-text" type="text" class="form-control">
            </div>
            <div class="form-group">
              <label>Bottom text</label>
              <input id="bottom-text" type="text" class="form-control">
            </div>
          </form>
        </div>

Answer 1

您的图片以默认值pancham.png开头 - 我假设您想要重置：

$('#image-url').keyup(function() {
    var image = $(this).val() || "pancham.png";
    $('div.meme > img').attr('src',image);
});

如果删除了网址，则图片会消失

1 个答案: