圖像顯示在文本輸入

Question

因此，我目前正在構建一種「實時預覽」，並且需要一個佔位符圖像，以便在信息輸入到<input>標記中時出現。我目前正在將此作爲我的實時預覽代碼，用於頁面上的文本字段，但無法使其適用於圖像。

$(function() 
{ 
    $(".companyname").keyup(function() 
    { 
     var companyname=$(this).val(); 
     $(".cn_preview").html(companyname); 
     return false; 
    }); 

    $(".tagline").keyup(function() 
    { 
     var tagline=$(this).val(); 
     $(".tag_preview").html(tagline); 
     return false; 
    }); 
$(".map").keyup(function() 
     { 
      var map=$(this).val(); 
      $(".map_preview").html(map); 
      return false; 
     }); 

    $(".about").keyup(function() 
    { 
     var about=$(this).val(); 
     $(".abt_preview").html(about); 
     return false; 
    }); 

佔位符圖像將相對於另一圖像定位。該結構是這樣的：

<div id="displaycontain"> 
       <div id="previewbottom"> 
        <h2 class="previewbottom">Preview Changes</h2> 
       <img src="images/previewimage.png" border="0" style="margin-left: auto; width: 100%;" /> 
       </div> 
       <div class="action" id="publishbutton"> 
        <input type="button" value="PUBLISH" class="myButton"></div> 
       <div id="test"> 
        <h4 name="cnpreview" class="cn_preview">Company Name</h4> 
        <p name="tagprev" class="tag_preview">Tagline here.</p> 
        <p name="aboutprev" class="abt_preview">This is where your description goes.</p> 
<img src="images/googlemap.png" name="mapplace" class="map_preview" border="0" /> 

       </div> 
      </div> 

而CSS爲：

.cn_preview { 
    color: #000000; 
    font-size: 1.2em; 
    text-decoration: none; 
    font-weight: lighter; 
    position: relative; 
    top: -298px; 
    left: 78px; 
    width: 200px; 
} 
.tag_preview { 
    color: #000000; 
    font-size: .8em; 
    text-decoration: none; 
    font-weight: lighter; 
    position: relative; 
    top: -288px; 
    left: 78px; 
    width: 100px; 
} 
.abt_preview { 
    color: #000000; 
    font-size: .7em; 
    text-decoration: none; 
    font-weight: lighter; 
    position: relative; 
    top: -258px; 
    left: 78px; 
    width: 400px; 
} 

這可能是一個長鏡頭，但任何形式的幫助或方向去哪裏將是有益的。

謝謝！

Answer 1

假設預覽文本之前，你的意思是添加相同的圖像，首先改變你的代碼，使用一個單一的功能：（避免冗餘代碼）

$(function() 
{ 
    $(".companyname").keyup(function() 
    { 
     return Preview($(this), "cn_preview"); 
    }); 

    $(".tagline").keyup(function() 
    { 
     return Preview($(this), "tag_preview");   
    }); 

    $(".about").keyup(function() 
    { 
     return Preview($(this), "abt_preview");   
    }); 
}); 

然後在函數中添加圖像：

function Preview(oTextbox, sPreviewClass) { 
    var previewImageSrc = "preview.png"; 
    var value = oTextbox.val(); 
    var oPreviewPanel = $("." + sPreviewClass); 
    oPreviewPanel.empty(); 
    if (value.length > 0) { 
     oPreviewPanel.append($("<img />").attr("src", previewImageSrc)); 
     oPreviewPanel.append(value); 
    } 
    return false; 
} 

以上也會在沒有文字時隱藏預覽面板。

jsFiddle現在已經關閉，當它回來時會添加實時測試用例。

Live test case。

編輯：從您對我的原始答案的評論，看起來像以上是沒有必要在你的情況。首先，只是在默認情況下隱藏的圖像：

<img src="images/googlemap.png" name="mapplace" class="map_preview" border="0" style="display: none;" /> 

然後，而不是在該行指定的HTML（這是沒有意義的）

$(".map_preview").html(map); 

有這樣一行來顯示圖像：

​​

當你想它（在其他預覽功能如）再次隱藏有：

$(".map_preview").hide();