在使用jQuery，CSS和HTML进行选择时，如何将字体系列和大小分别应用于多个动态DIV？

Question

I am using a solution I found in stackoverflow.com to apply font family and size to few dynamic DIVs. But it's applying the font-family and size on clicking of mouse after I selected desired font and size. But I want that should happen only to the selected DIV and I want to select the text in DIV first and then apply font and size. not the reverse way. Can you help me? Below is the code:

<form id="myform">
    <button>erase</button>
    <select id="fs"> 
        <option value="Arial">Arial</option>
        <option value="Verdana ">Verdana </option>
        <option value="Impact ">Impact </option>
        <option value="Comic Sans MS">Comic Sans MS</option>
    </select>
    <select id="size">
        <option value="7">7</option>
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
    </select>
</form>
<br />
<div id="container" class="changeMe">
    <div id="float">
        <p>
            Text into container
        </p>
    </div>
</div>

jQuery:

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

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

Answer 1

You were on the good path, the problem was that with your Jquery you were actually saying: "When one of the drop-down is changed, modify the css of all the elements with the "changeMe" class". I think the thing you actually want is something like: "When a paragraph in the div container is clicked, change the css of the clicked paragraph".

I made a jsfiddle for you, it does what you want, http://jsfiddle.net/QdfmZ/

$("#container").on('click','p',function(){
  $(this).css("font-size", $("#size").val() + "px");
  $(this).css("font-family", $("#fs").val());
});

This is the Jquery, first we tell that the div with the id "container" needs to listen to all clicks on the "p" elements. After that it is pretty simple, $(this) represents the clicked paragraph so we change his css with the values of the drop downs.