Question

我使用以下代码更改<div>中文字的字体大小。它会更改字体大小，但首先需要在下拉列表中选择大小，然后单击该文本，然后才会影响字体大小。但是，我希望立即更改所选文本的font-size。你能救我吗？

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<form id="myform">
    <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="name" class="name">dsfdsfsfdsdfdsf</div> 
<div id="address" class="address">sdfsdfdsfdsfdsf</div> 
<div id="address1" class="address1">sdfsdfdsfdsfdsf</div>

脚本

$(".name").click(function(){
    var id = this.id;
   $("#"+id).css('font-size', $('#size').val()+"px");
});

$(".name").click(function(){
    var id = this.id;//get clicked id
    $("#"+id).css('font-family', $('#fs').val());
});

Answer 1

这样做，看看..

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

Answer 2

如果选择了文本，没有事件可以捕获，但您可以使用mousedown / mouseup来模拟它并检查window.getSelection（）：

$(".name, .address, .address1").on("mousedown", function () {    
    $(this).one("mouseup", function () {            
        if (window.getSelection().toString().length > 0)
            $(this).css('font-size', $('#size').val()+"px");
    });
});

在JSFiddle

上查看

更新：感谢减号。更新的答案

Answer 3

这项工作适合你

$("div").focus(function(){
$(this).css('font-size', $('dropdown').val());
});

首先，您可以从下拉列表中选择字体大小，然后关注div jquery从dropdown元素中获取大小并更改divfont

Answer 4

根据您在问题中解释的内容，我看到您的代码可以满足您的需求。回答mohkhan是如果你自动更改大小选择字段，div的字体大小将被更改。那是你的期望吗？

另外还有一个更正，你将两个点击事件绑定到同一个div，你可以改变第一个处理程序中的字体，如

<script type="text/javascript">
    $(".name").click(function(){
    var id = this.id;
    $("#"+id).css('font-size', $('#size').val()+"px");
    $("#"+id).css('font-family', $('#fs').val());
    });

</script>

Answer 5

从您的问题来看，我相信您希望在单击它时更改文本大小和字体，同时您希望在更改大小或字体的下拉值后更改大小和字体。

您可以尝试以下代码来实现此目标。

<强> jQuery的：

var current_id;
$("#fs").change(function(){
    $("#"+current_id).css("font-family",$(this).val());

});

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

});

$(".name,.address,.address1").click(function(){
var id = this.id;
current_id = id;
$("#"+id).css('font-size', $('#size').val()+"px");
});

$(".name,.address,.address1").click(function(){

var id = this.id;//get clicked id
    current_id = id;
   $("#"+id).css('font-family', $('#fs').val());

});

<强>小提琴： http://jsfiddle.net/tamilmani/pKyHL/

Answer 6

这么多工作，你为什么不制作一个bbCode？这会简单得多。

Answer 7

这应该按照你的要求行事......对我来说这似乎是一个很好的解决方案：

http://jsfiddle.net/CLjZt/2/

jQuery：

$('div[data-entry=item]').click( function() {
    id = this.id;
    $('#fs').change( function(){
        $("#"+id).css('font-family', $('#fs').val());
    });
    $('#size').change( function(){
        $('#'+id).css('font-size', $('#size').val()+"px");
    });
});

HTML：

<form id="myform">
    <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 data-entry="item" id="name" class="name">dsfdsfsfdsdfdsf</div> 
<div data-entry="item" id="address" class="address">sdfsdfdsfdsfdsf</div> 
<div data-entry="item" id="address1" class="address1">sdfsdfdsfdsfdsf</div>

该函数将click事件添加到选择器 div [data-entry = item] ，然后将单击的元素的id记录到变量 id 。然后它会触发两个函数，用于监听 #fs 和 #size select 元素的更改。如果检测到更改，则会使用您创建的相同选择器将css属性更改为所选选项元素的值。

（您可以删除此数据类型并对所有3个项目使用相同的ID，但我不确定您是否因某些原因需要元素上的类和ID）

Answer 8

试试这个。

$('.name, .address, .address1').focus(function(){
    var fontSize = $('#size').val() + "px";
    $(this).css('font-size', fontSize);
});

如果您想首先选择文本，然后在下拉列表中选择字体时更改字体大小（而不是像我这里那样先选择字体大小），您可以创建一个变量对于所选文本，并设置一个事件监听器，以便在焦点位于其中一个div上时更新

var selectedDiv;
$('.name, .address, .address1').focus(function(){
    selectedDiv = this;
});

只要用户选择字体大小，就可以创建另一个事件监听器来更改字体。

$('#size').change(function(){
    var fontSize = $('#size').val() + "px";
    $(selectedDiv).css('font-size', fontSize);
});

如何在仅在该div中选择文本后更改div中的字体大小

8 个答案: