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

Question

我正在使用我在stackoverflow.com中找到的一个解决方案，将字体系列和大小应用于少数动态div。但它是在我选择所需的字体和大小后，点击鼠标应用字体家族和大小。但我希望这种情况只发生在选定的DIV上，并且我希望首先选择DIV中的文本，然后应用字体和大小。而不是相反的方式。你能帮我吗？以下是代码：

<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

你走的是好路，问题是你的Jquery实际上是在说："当其中一个下拉列表更改时，用"changeMe"类修改所有元素的css"。我认为你真正想要的是这样的东西："当div容器中的一个段落被点击时，更改被点击段落的css"。

我为你做了一把小提琴，它可以满足你的需求，http://jsfiddle.net/QdfmZ/

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

这是Jquery，首先我们告诉id为"container"的div需要监听"p"元素上的所有点击。在那之后，它非常简单，$（this）表示点击的段落，所以我们用下拉列表的值来更改他的css。