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").show();

当你想再次隐藏它时（例如在其他预览功能中）有：

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

要在文本输入上显示的图像

1 个答案: