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 に答える
0

これを試して。

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

最初にテキストを選択してから、ドロップダウンでフォントを選択するときにフォントサイズを変更する場合 (ここのように最初にフォントサイズを選択するのではなく)、選択した変数を作成できます。テキストを作成し、フォーカスがdivの1つにあるときはいつでも更新するようにイベントリスナーを設定します

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

これはあなたが求めていることをするはずです...それは私にとって良い解決策のようです:

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 select要素の変更をリッスンする 2 つの関数を起動します。変更が検出された場合は、作成した同じセレクターを使用して、css プロパティを選択したオプション要素の値に変更します。

(このデータ型を削除して、3 つのアイテムすべてに同じ ID を使用することもできますが、何らかの理由で要素にクラスと ID の両方が必要かどうかはわかりませんでした)

于 2013-10-11T21:00:04.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

非常に多くの作業があるので、bbCode を作成してみませんか? それははるかに簡単です。

于 2013-06-28T12:02:28.193 に答える