Jquery का उपयोग कर पाठ और फ़ॉन्ट बदलना

I am using the following code for
1) Display the changed content in DIV container so if someone types in textbox it should simultaneously display the typed content
2) on selection of fonts, font should be applied to that content

लेकिन यह सुनिश्चित नहीं कर रहा है कि मैं क्या गलत कर रहा हूं?

 
<head>
<title>Change Contents</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

  <script type="text/javascript" language="javascript">
    $("#fs").change(function() {
    alert($(this).val());
    $('.changeMe').css("font-family", $(this).val());

});

$("#size").change(function() {
    $('.changeMe').css("font-size", $(this).val() + "px");
});
</script>
</head>

<body>
<form id="myform">
    <button>erase</button>
    

    
</form>


<div id="container" class="changeMe"> <div id="float">
Text into container

</div> </div> </body> </html>
1
जोड़ा संपादित
विचारों: 1
नहीं यह काम नहीं करता है
जोड़ा लेखक user580950, स्रोत
क्या अलर्ट काम करता है?
जोड़ा लेखक AlphaMale, स्रोत

5 उत्तर

Pleae jQuery हैंडल() खंड में अपने हैंडलर शुरू करें।

$(function() {
});

आपका कोड इस तरह दिखेगा:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

...




<div id="container" class="changeMe">
    <div id="float">
        
Text into container

</div> </div> <script> $(window).load(function(){ $('#ta').keyup(function(){ $('#float').html("
"+$(this).val()+"

"); }); $("#fs").change(function() { $('.changeMe').css("font-family", $(this).val()); }); $("#size").change(function() { $('.changeMe').css("font-size", $(this).val() + "px"); }); }); </script> </body> </html>

Other changes :

  • use jQuery 1.7.1 instead of this old version
  • use an id for the text area to detect change
  • use "keyup" instead of "change" so that the change is immediate (no need to click outside)

If you want only the div to be changed, simply replace $('.changeMe') by $('#float') in the two last handlers.

2
जोड़ा
यह यहां jsfiddle.net/nanoquantumtech/YfQfr पर काम करता है, लेकिन मैं चाहता हूं कि डीईवी में टेक्सटेरिया सामग्री प्रदर्शित करें और उस DIV के फ़ॉन्ट्स को Textarea नहीं बदलें
जोड़ा लेखक user580950, स्रोत
मैंने आपके निर्देश के अनुसार किया लेकिन यह अब फ़ॉन्ट को बदलना प्रतीत नहीं होता है "अगर आप केवल div को बदलना चाहते हैं, तो बस दो अंतिम हैंडलरों में $ ('# change') $ ('# float') को प्रतिस्थापित करें।"
जोड़ा लेखक user580950, स्रोत
बस जांच की है कि यह बहुत अच्छा काम करता है
जोड़ा लेखक user580950, स्रोत
मैंने कुछ और चीजें बदल दीं, संपादन देखें।
जोड़ा लेखक Denys Séguret, स्रोत
यहां यह क्रिया में है: jsfiddle.net/dystroy/mVwj7
जोड़ा लेखक Denys Séguret, स्रोत

आप तैयार हैंडलर खो रहे हैं:

$(function(){
 //your code goes here
});

or alternatively put your code at bottom just before </body> tag so that when your code runs, it knows about elements.

The following code should work fine:

$(function(){

   $("#fs").change(function() {
     alert($(this).val());
     $('.changeMe').css("font-family", $(this).val());
   });

   $("#size").change(function() {
     $('.changeMe').css("font-size", $(this).val() + "px");
   });

});
1
जोड़ा
यह यहां jsfiddle.net/nanoquantumtech/YfQfr पर काम करता है, लेकिन मैं चाहता हूं कि डीईवी में टेक्सटेरिया सामग्री प्रदर्शित करें और उस DIV के फ़ॉन्ट्स को Textarea नहीं बदलें
जोड़ा लेखक user580950, स्रोत
@ user580950: टेक्स्टरेरा में एक कीप्रेस ईवेंट जोड़ा गया है, यहां अपडेटेड फ़िल्ड देखें: jsfiddle.net/YfQfr/2</एक>
जोड़ा लेखक Sarfraz, स्रोत

it is working for me : http://jsfiddle.net/nanoquantumtech/YfQfr/

$(document).ready(function() {
        $("#fs").live('change', function() {
            alert($(this).val());
            $('.changeMe').css("font-family", $(this).val());

        });

        $("#size").live('change', function() {
            $('.changeMe').css("font-size", $(this).val() + "px");
        });

        $("#fs").trigger('change');

        $("#size").trigger('change');
    });
0
जोड़ा
धन्यवाद हाँ यह काम करता है, लेकिन मुझे पाठ सामग्री को बदलने की आवश्यकता है, पाठ क्षेत्र में वही सामग्री div id = "कंटेनर" में प्रदर्शित की जानी चाहिए
जोड़ा लेखक user580950, स्रोत

शीर्षलेख में अपनी स्क्रिप्ट न डालें: संदर्भित डीओएम ऑब्जेक्ट्स उपलब्ध होने से पहले उन्हें निष्पादित किया जाता है।

इसे अपने शरीर के अंत में रखें:

<script>
$(window).load(function(){
    $("#fs").change(function() {
    alert($(this).val());
    $('.changeMe').css("font-family", $(this).val());
    $("#size").change(function() {
        $('.changeMe').css("font-size", $(this).val() + "px");
    });
});
</script>
0
जोड़ा
मैंने शरीर में रखा लेकिन इससे मदद नहीं मिली
जोड़ा लेखक user580950, स्रोत
यह यहां jsfiddle.net/nanoquantumtech/YfQfr पर काम करता है, लेकिन मैं चाहता हूं कि डीईवी में टेक्सटेरिया सामग्री प्रदर्शित करें और उस DIV के फ़ॉन्ट्स को Textarea नहीं बदलें
जोड़ा लेखक user580950, स्रोत

डाइस्ट्रॉय ने जो कहा, उसके साथ आप jQuery का भी उपयोग कर सकते हैं (चूंकि आपने इसे jQuery के रूप में टेज किया है, मुझे लगता है कि आप इसका उपयोग करते हैं) तैयार </ए> विधि

0
जोड़ा
यह यहां jsfiddle.net/nanoquantumtech/YfQfr पर काम करता है, लेकिन मैं चाहता हूं कि डीईवी में टेक्सटेरिया सामग्री प्रदर्शित करें और उस DIV के फ़ॉन्ट्स को Textarea नहीं बदलें
जोड़ा लेखक user580950, स्रोत