Question

我正在尝试使用jQuery创建代码实时预览表单，因此当人们输入输入时，相关的<span>将会更新。

JQuery的：

var $comment = '';
$(function() {
    $("input").keyup(function() {
        var currClass = $(this).attr('class');
        $comment = $(this).val();
        $('span.'+currClass).html($comment);
        return false;
    });
});

HTML：

<label for="image-left-url">Image URL: </label>
<input id="image-left-url" class="image-left-url" value="http://"></input>

<code><pre>&lt;img src=&quot;<span class="image-left-url"></span>&quot;/&gt;</pre></code>

我的问题是，对于某些输入，我有value="xx"部分。如何设置，以便input为空，value="xx"不显示（以便它不显示在<span>中）？

Answer 1

var $comment = '';
$(function() {
    $("input").keyup(function() {
        var currClass = $(this).attr('class');
        var _val = $(this).val();
        $comment = (_val != 'xx') ? _val : '';
        $('span.'+currClass).html($comment);
        return false;
    });
});

http://jsfiddle.net/UX4a9/

Answer 2

像这样的东西

var $comment = '';
$(function() {
    $("input").keyup(function() {
        var currClass = $(this).attr('class');
        $comment = $(this).val();
        if(!$comment){
           $(this).val('xx');
           $('span.'+currClass).hide();
        } 
        else{
           $('span.'+currClass).html($comment).show();
        }

        return false;
    });
});

Answer 3

var $comment = '';
$(function() {
    $("input").keyup(function() {
        var currClass = $(this).attr('class');
        $comment = $(this).val();
        var notblank = ($comment != $(this).attr("value"));
        $('span.'+currClass).html(notblank ? $comment : '');
        return false;
    });
});

Jquery：如果输入不为空，如何只显示输入值？

3 个答案: