javascript - 如何执行记录函数，而不是使用jQuery在同一DIV上再次运行它

在我的几张轮播幻灯片中，我正在将DIV的像素值转换为百分比。

$('#carousel-lesson-slide').on('slid.bs.carousel', function () {

//  convert to percentage
  function convert_to_percentage(el){
    var parent = el.parent();
    el.css({
      left:parseInt(el.css('left'))/parent.width()*100+"%",
      top: parseInt(el.css('top'))/parent.height()*100+"%",
      width: el.width()/parent.width()*100+"%",
      height: el.height()/parent.height()*100+"%"
    });
  }

  if ($('.droppable-icon-on-img-wrap').is(":visible")) {
    $(".dropped-icon-holder").each(function(){
      convert_to_percentage($(this))
    });
  }

  if ($('.droppable-label-on-img-wrap').is(":visible")) {
    $(".dropped-label-holder").each(function(){
      convert_to_percentage($(this))
    });
  }

});

因此，我的问题是：在幻灯片之间切换时，如何避免一次又一次地将.dropped-icon-holder和.dropped-label-holder宽度转换为百分比。

请注意：.dropped-icon-holder和.dropped-label-holder将出现在一张以上的幻灯片中，但是一旦将它们转换为像素值然后再进行转换就不会发生。我需要将每行代码都保留在slid.bs.carousel内，因为要获取.dropped-icon-holder和.dropped-label-holder父级的宽度。

最佳答案

最初为该元素调用函数时，请使用data()为每个元素存储一个标志。检查该标志，如果它为false，则仅继续执行该函数：

function convert_to_percentage(el){
    if(el.data('converted')) return;

    var parent = el.parent();
    el.css({
        left:parseInt(el.css('left'))/parent.width()*100+"%",
        top: parseInt(el.css('top'))/parent.height()*100+"%",
        width: el.width()/parent.width()*100+"%",
        height: el.height()/parent.height()*100+"%"
    }).data('converted', true);
}