1

我正在尝试将文本颜色和背景颜色添加到表单中的隐藏 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");                        
        });
    });
});
4

5 回答 5

0

改变

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

至

$('.preview').click(function(){
   $(".testcolor").css("visibility","visible");                        
});
于 2013-01-02T09:03:07.417 回答
0

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

工作小提琴

$(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");              
      });
   });
});

检查这个工作小提琴

于 2013-01-02T09:10:42.137 回答
0

您可以使用 text 代替 val

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

和

$('.preview').click(function(){
 $(".testcolor").css("visibility","visible");                        
});
于 2013-01-02T09:04:26.683 回答
0 
$(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                       
        });

});​

更新的演示

于 2013-01-02T09:17:57.387 回答
0

尝试这个：

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

在这里演示

于 2013-01-02T09:22:05.117 回答