jquery 对话框和可选择的

Question

我有一堆显示文本的 div。

我已将这些设置为可选，我最理想的做法是能够更改所选 div 的文本字体大小。

我有一个对话框，它有一个基本表单，其中字体大小位于选择列表中，但我正在努力寻找一种方法来实际定位对话框中的可选项。

$(function(){
    $('#template_inner').selectable({
           selected: function(event, ui){
            console.log(ui);
            // displays the HTML in the console

        }
    })


$( "#font-size-form" ).dialog({
    autoOpen: false,
    height: 200,
    width: 270,
    modal: true,
    position: ['top', 200],
    buttons: {
        "Select": function() {
        },
        Cancel: function() {
            $( this ).dialog( "close" );
        }
    },
    close: function() {
    }
});

   $( ".font-size" )
       .button()
       .click(function() {
           $( "#font-size-form" ).dialog( "open" );
   });
});


<div id="font-size-form" title="Choose Font Size">
    <form action="" method="">
        <p>Please choose your font-size</p>
        <div class="">
            <select name="size">
                <option value="8">8</option>
                <option value="12">12</option>
                <option value="14">14</option>
                <option value="16">16</option>
                <option value="18">18</option>
                <option value="20">20</option>
                <option value="22">22</option>
                <option value="24">24</option>
                <option value="26">26</option>
                <option value="28">28</option>
                <option value="30">30</option>
                <option value="32">32</option>
            </select>
        </div>

    </form>
</div>

所以，当我点击div，然后点击打开字体大小对话框，选择字体大小，我想改变div中文字的字体大小。

这可能吗？

非常感谢

Answer 1

如果您只需要记住页面期间的选择，那么您可以将字体大小保存为可选数据（参见documentation）。

//in your dialog
"Select": function() {
  $('#template_inner .ui-selected').css('font-size', $('select[name="size"]').val() + 'px');
  $('#template_inner').data('fontSize', $('select[name="size"]').val());
}

//on your selectable
$('#template_inner').selectable({
  selected: function(event, ui){
    var defaultSize = 22;
    // Get the saved value or default on new selects.
    var size = $('#template_inner').data('fontSize') || defaultSize;
    $(ui.selected).css('font-size', size + 'px');
  }
})