JQuery, как получить значение каждого события остановки в изменяемый размер

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 show undefined

Как я могу получить эти значения для любой идеи ???

Answer 1

Resize - это событие, а 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);