Question

我想使用可调整大小的方法获取每个停止事件值的值

jQuery

function calc(){
  $(function() {
    $(".txt").resizable({
      stop: function(e, ui) {
        var w = ui.size.width;
        var h = ui.size.height;
        var Font_size=parseInt($(".txt").css("font-size"));
      }
    });
  });
}

console.log(Font_size); //when I try this - variable undefined

每当我尝试打印 Font_size 显示未定义

时，

我如何获得任何想法的价值？？

Answer 1

调整大小是一个事件，stop是该停止事件的事件处理程序。您可以访问该stop事件，包括在事件处理程序中调用一个函数-我从您的问题中推断出该函数。仅当使用文档就绪事件处理程序（已触发该事件）调用calc函数时，才放置该事件处理程序。我将事件处理程序放在该函数调用之外。而不是设置一些已记录的静态全局变量，而是在这里展示如何在触发函数时调用该函数并将其记录在此。

编辑：添加了第二个示例，以显示如何在启动时使用一些帮助程序设置全局。

function calc(fontSize) {
  console.log("calc:",fontSize);
}
function calc2(event, ui) {
  let fontSize2 = parseInt($(this).css("font-size"), 10);
  console.log('calc2:', fontSize2);
  console.log('calc2 More:', ui.size.width, ui.size.height);
}

$(function() {
  $(".txt").resizable({
    stop: function(e, ui) {
      let w = ui.size.width;
      let h = ui.size.height;
      let Font_size = parseInt($(this).css("font-size"), 10);
      calc(Font_size);
    }
  });
  $(".txt").on("resizestop", calc2);
});

.txt {
  border: solid 2px lime;
  width: 50%;
  height: 2em;
}

.bigger-size {
  font-size: 1.5em;
}

.tiny-size {
  font-size: 0.75em;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="txt normal-size">happy slappy resizable text </div>
<div class="txt bigger-size">happy slappy resizable text </div>
<div class="txt tiny-size"><span>Howdy</span> happy slappy resizable text </div>

进一步，演示如何实际使用全局变量（因为undefined是在console.log之后设置的），

// borrow some code: https://stackoverflow.com/a/2523758/125981
$.widget("ui.resizable", $.ui.resizable, {
  resizeTo: function(newSize) {
    var start = new $.Event("mousedown", {
      pageX: 0,
      pageY: 0
    });
    this._mouseStart(start);
    this.axis = 'se';
    var end = new $.Event("mouseup", {
      pageX: newSize.width - this.originalSize.width,
      pageY: newSize.height - this.originalSize.height
    });
    this._mouseDrag(end);
    this._mouseStop(end);
  }
});

var calc = function calc(event, ui) {
  console.log('calc', "ui:", ui ? ui.size : undefined);
  let w = ui.size.width;
  let h = ui.size.height;
  console.log("calc Font_size:", window.Font_size);
}

function calc2(event, ui) {
  console.log('calc2', ui.size);
}

$(function() {
  // bind an event we can use to add resizable event
  $(".resizable-things")
    .find('.txt')
    .on('bind-resizable', function(event, options, others) {
      $(this).resizable(options);
    });

  // trigger to bind tiny-size
  $('.txt.tiny-size').trigger('bind-resizable', {
    grid: [20, 10],
    stop: calc2
  });

  // trigger to bind others
  $('.resizable-things')
    .find('.txt')
    .not('.txt.tiny-size')
    .not(".txt.bigger-size")
    .trigger('bind-resizable', {
      stop: calc
    });

  $('#testresize').one('click', function(event) {
    let b = $(".txt.bigger-size");
    b.trigger('bind-resizable', {
      stop: function(event, ui) {
        // just to show it binds
        console.log('stop w', ui.size.width);
        console.log($(this).css('font-size'));
        // create our bad idea global variable
         window.Font_size = parseInt($(this).css("font-size"), 10);
        calc.call(this, event, ui);
      },
      alsoResize: ".txt-mirror",
    });

    let m = $('.txt-mirror');
    b.css("font-size", "1.65em");
    b.resizable("resizeTo", {
      // 190% height of the mirror which changes the mirror height on trigger resizeTo
      height: (m.height() / 100) * 190,
      width: (m.width()/100) * 55//55 percent width
    });
    $(this).hide();//hide button
  });
});

.ui-resizable {
  border: solid 2px lime;
}

.bigger-size {
  font-size: 1.5em;
  border: 1px cyan dashed;
  margin: 1em;
}

.tiny-size {
  font-size: 0.75em;
}

.txt-mirror,
.txt-mirror .show {
  border: 1px solid blue;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="txt txt-mirror">I mirror resize text<span class="show">?</span> </div>
<div class="container resizable-things">
  <div class="txt normal-size">happy slappy resizable text I am other </div>
  <div class="txt bigger-size">happy slappy resizable text </div>
  <div class="txt tiny-size"><span>Howdy</span> happy slappy resizable text </div>
</div>
<button id="testresize" type='button'>test event</button>

Answer 2

function calc(){
$(function() {
    $(".txt").resizable({
        stop: function(e, ui) {
            var w = ui.size.width;
            var h = ui.size.height;
            var Font_size=parseInt($(".txt").css("font-size"));
            console.log(Font_size);
        }});
});
}

OR

var Font_size = 0;
function calc(){
$(function() {
    $(".txt").resizable({
        stop: function(e, ui) {
            var w = ui.size.width;
            var h = ui.size.height;
            Font_size=parseInt($(".txt").css("font-size"));

        }});
});
}
console.log(Font_size);

jQuery如何获取可调整大小的每个stop事件的值

2 个答案: