7

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

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());
});
4

8 回答 8

1

这样做，看看..

$("#size").change(function() {
    $(".name, .address, .address1").css('font-size', $('#size').val() + "px");
});
于 2013-06-28T11:22:19.207 回答
1

如果选择了文本，则无法捕获任何事件，但您可以使用 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检查它

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

于 2013-06-28T11:26:10.017 回答
1

这项工作适合你

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

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

于 2013-06-29T14:55:36.503 回答
0

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

您可以尝试下面的代码来实现这一点。

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/

于 2013-06-28T12:01:21.627 回答
0

这应该可以满足您的要求......对我来说这似乎是一个很好的解决方案：

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>

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

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

于 2013-10-11T21:00:04.503 回答
0

尝试这个。

$('.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);
});
于 2013-11-12T22:45:24.770 回答
0

根据您在问题中的解释，我看到您的代码可以满足您的要求。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>
于 2013-06-28T11:44:29.523 回答
0

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

于 2013-06-28T12:02:28.193 回答