2017-04-19 2 views
1

Unten ist meine jQuery für einen Meme Generator Ich lerne zu bauen. Grundsätzlich, wenn ein Benutzer eine URL eingibt und löscht, verschwindet das ursprüngliche Standardbild und ich habe Probleme damit, das Bild in den Standardzustand zu versetzen, wenn der Benutzer seine Eingabe entfernt.Bild verschwindet, wenn URL gelöscht wird

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); 

Dieser spezifische Code hier ist, wo ich nicht herausfinden kann, wie das Standardbild erhalten neu zu laden, wenn ein Benutzer ihre URL löscht.

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

ist hier, um die entsprechenden 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> 

Antwort

1

Ihr Bild beginnt mit einem Standard von pancham.png - ich nehme an, Sie wollen, dass Reset:

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

Das es fest !!! Ich habe diesen Weg zu hart gemacht, als die Antwort wirklich einfach war. Vielen Dank!! –

Verwandte Themen