Question

我从其他应用程序获得了更改进度的代码。基于进度条的width属性，我可以更改进度文本吗？

我想要一个事件，当progress-indicator-text的宽度改变时，它会更新progress-indicator-bar。代码在这里：

$(function() {
  //For demo purpose only
  $('button').click(function() {
    var percentWidth = $('.progress-indicator-bar').width() / $('.progress-indicator-bar').parent().width() * 100;
    if (percentWidth < 100) $('.progress-indicator-bar').width(percentWidth + 10 + "%");
  })
  //Requires appropriate event/approach to change the text of .progress-indicator-text when width of .progress-indicator-bar changes.
  $('.progress-indicator-bar').change(function() {
    $('.progress-indicator-text').html($('.progress-indicator-bar').width() / $('.progress-indicator-bar').parent().width() * 100 + "%");
  })
});

.progress-indicator-bar-holder {
  width: 100px;
  height: 10px;
  background: #e4e4e4;
  float: left;
}

.progress-indicator-bar {
  background: #008000;
  height: 10px;
}

.progress-indicator-text {
  font-weight: bold;
  font-size: 11px;
  line-height: 8px;
  margin-left: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- This code embeds from another application -->
<div class="progress-indicator">
  <div class="progress-indicator-bar-holder">
    <div class="progress-indicator-bar" style="width: 30%;"></div>
  </div>
</div>
<!-- Based on progress-indicator-bar width the progress-indicator-text should change -->
<div class="progress-indicator-text">30%</div>
<br>
<button>Change</button>

Answer 1

这有点像打破轮子上的蝴蝶，但是您可以利用MutationObserver API来监视DOM中的变化。

只需注册包含百分比栏的div，只要它的 style 属性更改就会更新包含文本的div。

这是一个例子：

//For demo purpose only
$('button').click(function() {

  var percentWidth = $('.progress-indicator-bar').width() / $('.progress-indicator-bar').parent().width() * 100;
  if (percentWidth < 100) $('.progress-indicator-bar').width(percentWidth + 10 + "%");
})

var target = document.getElementsByClassName('progress-indicator-bar');
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.attributeName == "style") {
      $('.progress-indicator-text').html($('.progress-indicator-bar').width() / $('.progress-indicator-bar').parent().width() * 100 + "%");
    }
  });
});

var config = {
  attributes: true,
  childList: true,
  characterData: true
};
observer.observe(target[0], config);

.progress-indicator-bar-holder {
  width: 100px;
  height: 10px;
  background: #e4e4e4;
  float: left;
}

.progress-indicator-bar {
  background: #008000;
  height: 10px;
}

.progress-indicator-text {
  font-weight: bold;
  font-size: 11px;
  line-height: 8px;
  margin-left: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="progress-indicator">
  <div class="progress-indicator-bar-holder">
    <div class="progress-indicator-bar" style="width: 30%;"></div>
  </div>
</div>
<!-- Based on progress-indicator-bar width the progress-indicator-text should change -->
<div class="progress-indicator-text">30%</div>
<br>
<button>Change</button>

Answer 2

在处理程序中，您可以使用.trigger方法在jQuery中触发事件。

$(function() {
  //For demo purpose only
  $('button').click(function() {
    var percentWidth = $('.progress-indicator-bar').width() / $('.progress-indicator-bar').parent().width() * 100;
    if (percentWidth < 100) $('.progress-indicator-bar').width(percentWidth + 10 + "%");
    $('.progress-indicator-bar').trigger('change') // i added this line
  })
  //Requires appropriate event/approach to change the text of .progress-indicator-text when width of .progress-indicator-bar changes.
  $('.progress-indicator-bar').change(function() {
    $('.progress-indicator-text').html($('.progress-indicator-bar').width() / $('.progress-indicator-bar').parent().width() * 100 + "%");
  })
});

.progress-indicator-bar-holder {
  width: 100px;
  height: 10px;
  background: #e4e4e4;
  float: left;
}

.progress-indicator-bar {
  background: #008000;
  height: 10px;
}

.progress-indicator-text {
  font-weight: bold;
  font-size: 11px;
  line-height: 8px;
  margin-left: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- This code embeds from another application -->
<div class="progress-indicator">
  <div class="progress-indicator-bar-holder">
    <div class="progress-indicator-bar" style="width: 30%;"></div>
  </div>
</div>
<!-- Based on progress-indicator-bar width the progress-indicator-text should change -->
<div class="progress-indicator-text">30%</div>
<br>
<button>Change</button>

Answer 3

您可以使用ResizeSensor来检测元素的宽度变化。请参阅此页面How to detect DIV's dimension changed?

当另一个元素属性更改时，更新元素的文本

3 个答案: