Question

我正在尝试将文本颜色和背景颜色添加到表单中的隐藏div。填充文本或背景输入字段后，div应显示新颜色和背景中的预填充文本。代码如下：

对于CSS

.testcolor{
    width:250px;
    height:150px;
    border:1px solid #000000;
    display:hidden; 
}

适用于HTML

<form id="myform" action="" method="post"> 
    <input type="text" id="txtcolor" class="tstcolor" name="txtcolor" value="#FF0000">
    <input type="text" id="bgcolor" class="tstcolor" name="bgcolor" value="#FFFFFF">
    <a href="#" class="preview">Preview</a>
    <div class="testcolor">
        Lorem ipsum ist nuch nach in die postimen obscurites nang interust ingrostech hochester gelumen bransiolen.
    </div>
</form>

适用于Javascript

$(document).ready(function(){
    $(".tstcolor").keyup(function(){
        var txtcolor = $("#txtcolor").val();
        var background = $("#bgcolor").val();

        $("#txtcolor").css("color",txtcolor);
        $("#bgcolor").css("background-color",background);

        $('.preview').click(function(){
            $("#testcolor").css("visibility","visible");                        
        });
    });
});

Answer 1

更改

$('.preview').click(function(){
            $("#testcolor").css("visibility","visible");                        
});

到

$('.preview').click(function(){
   $(".testcolor").css("visibility","visible");                        
});

Answer 2

您可以使用文字而不是val

var txtcolor = $("#txtcolor").text;
var background = $("#bgcolor").text;

和

$('.preview').click(function(){
 $(".testcolor").css("visibility","visible");                        
});

Answer 3

您提到了#testcolor而不是.testcolor，并且您将css属性分配给TextBox而不是div。如果要在单击a标记时显示更改，请更改单击事件中的css属性。（如果在click事件之外更改css，那么只要TextBox的值发生变化，div就会改变）

<强> Working Fiddle

$(document).ready(function(){
   $(".tstcolor").keyup(function(){
      var txtcolor = $("#txtcolor").val();
      var background = $("#bgcolor").val();            
      //removed div css properties from here
      $('.preview').click(function(){
         //added div css properties
         $(".testcolor").css("color",txtcolor);               
         $(".testcolor").css("background-color",background);
         //replaced '#' with '.'
         $(".testcolor").css("visibility","visible");              
      });
   });
});

选中 Working Fiddle

Answer 4

$(document).ready(function(){
    $(".tstcolor").keyup(function(){
        var txtcolor = $("#txtcolor").val();
        var background = $("#bgcolor").val();

        $("#txtcolor").css("color",txtcolor);
        $("#bgcolor").css("background-color",background);
        });

        $('.preview').click(function(){ // Place onclick outside keyup event
            var txtcolor = $("#txtcolor").val();
            var background = $("#bgcolor").val();
            $(".testcolor").css({"background-color":background,"color":txtcolor}).show();//use class selector,i.e (.) for class and (#) for id                       
        });

});

Updated Demo

Answer 5

试试这个：

$(".tstcolor").keyup(function() {

    var txtcolor = $("#txtcolor").val();
    var background = $("#bgcolor").val();
    $("#txtcolor").css("color", txtcolor);
    $("#bgcolor").css("background-color", background);
});

$('.preview').click(function(e) {

    e.preventDefault();
    $(".testcolor").show().css({
        'color': $("#txtcolor").val(),
        'background-color': $("#bgcolor").val()
    });
});

DEMO HERE

使用jquery从html表单添加文本和背景颜色到div

5 个答案:

Updated Demo