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

valの代わりにテキストを使用できます

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

と

$('.preview').click(function(){
 $(".testcolor").css("visibility","visible");                        
});
于 2013-01-02T09:04:26.683 に答える
0

#testcolor代わりに言及し.testcolorていて、cssプロパティをではなくTextBoxに割り当てていましたdiv。aタグをクリックしたときに変更を表示したいので、クリックイベント内のcssプロパティを変更します。（クリックイベントの外部でcssを変更すると、TextBoxの値が変更されるたびに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 
$(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 に答える