javascript 为什么CSS元素在动态显示时不能正确显示(百分比栏)？

h43kikqp 于 2023-03-21 发布在 Java

关注(0)|答案(2)|浏览(135)

我的网站向用户展示他们的测验结果。结果是从SQL数据库返回的。我已经确认数据被正确返回，并且是正确的类型（整数）。文本字段按预期添加，但是对于百分比栏（用户的分数），只有第一个正确加载。
我在php文件中的代码：

$(document).ready(function() {
    $width = $("#myResultBar").data('width');
    $("#myResultBar").css("width", $width + "%");
  });
  </script>

我和〈？php的代码，只正确显示第一个百分比栏：

<?php
  for($i = 0; $i < count($life_ins_quiz_chapter_num); $i++){
?>
      <!-- results box -->
      <div class="result_box">
        <h3 class="hd text-center">Chapter: <?php echo $life_ins_quiz_chapter_num[$i];?></h3>
        <p><?php echo $life_ins_quiz_chapter_desc[$i];?></p>
        <div class="row align-items-center">
          <div class="bar_main col-sm-11 col-9">
            <div id="mySaving" class="bar">
              <div id="mySavingBar" data-width="<?php echo $life_ins_quiz_chapter_pct[$i];?>"></div><!--problem here-->
            </div>
          </div>
          <div class="percent col-sm-1 col-3">
**            <!--This only shows up the first time. What am I doing wrong?-->**
            <?php echo $life_ins_quiz_chapter_pct[$i]; ?> %
          </div>
        </div>
        <div class="box_analysis">
          <h3>Question Score: <?php echo "[ " . $life_ins_quiz_chapter_score[$i] . "/6 ]"; ?> </h3>
          <?php //echo $saving_report_detail; ?>
        </div>
      </div>
<?php
  }//end for
?>

我有：1-做了多次检查，以获得正确的数据类型到该变量gettype（variable）= integer 2-无法弄清楚是否有一种方法来改变js中的东西，让它增加id（例如#MySavingBar_1（2，3）等。
乐于接受任何指导或建议。

JavaScript

来源：https://stackoverflow.com/questions/75785045/why-does-the-css-element-fail-to-show-correctly-when-done-dynamically-percentag

2条答案

按热度按时间

z0qdvdin1#

相应调整代码

当你在PHP中循环时，你有多个result_box。所以在javascript中，你需要在result_box中循环，并设置ht程序width。
JS解释

$(document).ready(function(){
/* find the `.bar` element inside the `result_box` 
   and loop through all the barElements
   find the `#mySavingBar` element inside the barElements
   get the `width` data property
   set the `width` to the element
*/
  $(".result_box .bar").each(function(index,barElement){
    var progressElement = $(barElement).find("#mySavingBar");
      var width = $(progressElement).data("width");
      $(progressElement).css("width", width + "%");
    });
});

.bar > #mySavingBar{
  background-color:red;
  height:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Loop Here -->
<div class="result_box">
        <h3 class="hd text-center">Chapter: 1></h3>
        <div class="row align-items-center">
          <div class="bar_main col-sm-11 col-9">
            <div id="mySaving" class="bar">
              <div id="mySavingBar" data-width="20"></div><!--problem here-->
            </div>
          </div>
        </div>
</div>
<!-- Loop End --->

<!-- dummy data -->
<div class="result_box">
        <h3 class="hd text-center">Chapter: 1></h3>
        <div class="row align-items-center">
          <div class="bar_main col-sm-11 col-9">
            <div id="mySaving" class="bar">
              <div id="mySavingBar" data-width="40"></div><!--problem here-->
            </div>
          </div>
        </div>
</div>
<div class="result_box">
        <h3 class="hd text-center">Chapter: 1></h3>
        <div class="row align-items-center">
          <div class="bar_main col-sm-11 col-9">
            <div id="mySaving" class="bar">
              <div id="mySavingBar" data-width="50"></div><!--problem here-->
            </div>
          </div>
        </div>
</div>
<!-- dummy end -->

赞(0）回复(0）举报 2023-03-21

qco9c6ql2#

@Chandra Shekhar的建议帮助我解决了这个问题。
在本例中，我使用jQuery each()函数来迭代生成的每个div。我必须从使用id=“myResultBar”切换到使用class=“myResultBar”。这是iterating over divs...的答案所建议的。解决此问题的代码：

$(".myResultBar").each(function(i) {
  $width = $(this).data("width");
  $(this).css("width", $width + "%");

}）;

赞(0）回复(0）举报 2023-03-21

我来回答

javascript 为什么CSS元素在动态显示时不能正确显示(百分比栏)？

2条答案

相关问题

热门标签

最新问答