1

我正在使用在 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");
});
4

1 回答 1

0

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.

于 2013-06-28T13:11:29.047 回答