我如何使用JavaScript更改WordPress短码值

Question

我正在使用watupro插件进行简单测试。在结果窗口中有一些变量显示数字测试结果：%%类别点-4 %%，%%类别点-5 %%等。

我正在使用进度条插件，以显示通过短代码结果的进度栏。 [WPPB Progress = %%类别点-4 %%/130选项= green]根据学生在每个类别中的结果，给了我不错的进度栏。

但是，我想根据结果显示不同的进度栏。为了实现这一目标，我想根据数字值更改短代码的值。

到目前为止，我提出了此代码：

html：

<div class="bar" data-score="%%CATEGORY-POINTS-4%%">[wppb progress=%%CATEGORY-POINTS-4%%/130 option=green]</div>

<div class="bar" data-score="%%CATEGORY-POINTS-5%%">[wppb progress=%%CATEGORY-POINTS-5%%/130 option=green]</div>

<script type="text/javascript">
results();
</script>

javaScript：

function results() {
    var bar = document.getElementsByClass('bar');
    var score = bar.getAttribute('data-score');
    alert (score);
    if (score < 47) {
// ???
 }
    if (score > 46 && 4_score < 71) {
// ???
 }
    if (score > 70) {
// ???
 }

我想我需要提出将快点属性option分别为每个div的不同颜色的代码。

有什么想法吗？

Answer 1

由于您正在使用WP，因此可以尝试这样的jQuery：

let score = jQuery('.bar').data('score'); // get element data-score
if (score > 46 && score < 71) { // your condition
$(".green").toggleClass('green yellow'); // changes class green to yellow
} 

然后创建新的CSS类黄色：

div.wppb-progress > span.yellow {
background: linear-gradient(to bottom, #ffe893 0%,#ffd644 33%,#f5c001 62%,#bd9400 100%);
}

Answer 2

好的。我解决了。
我添加了循环，因此，JavaScript经过所有Divs。

这里是代码：

<div id="watupro_quiz" class="quiz-area single-page-quiz">
  <div id="startOutput"> </div>

<!--<script type="text/javascript" src="https://psy-help.ee/wp-content/scripts/test_results.js"></script>-->

  <div class="bar" data-score="71" data-less="47" data-more="70">
    <div class="wppb-wrapper ">
      <div class="wppb-progress fixed"><span class="yellow" style="width: 39.230769230769%;"><span></span></span></div>
    </div>
  </div>
  <div class="bar" data-score="62">
    <div class="wppb-wrapper ">
      <div class="wppb-progress fixed"><span class="yellow" style="width: 47.692307692308%;"><span></span></span></div>
    </div>
  </div>

  <!--<script type="text/javascript">
    results();-->
  </script>

</div>

div.wppb-wrapper {
    clear: both;
}

div.wppb-progress {
    height: 25px;
    width: 400px;
    background: #555;
    -moz-border-radius: 30px;
    -o-border-radius: 30px;
    border-radius: 30px;
    position: relative;
}

div.wppb-progress > span.green {
    background: #83c783;
    background: -moz-linear-gradient(top, #83c783 0%, #52b152 33%, #008a00 62%, #005700 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#83c783), color-stop(33%,#52b152), color-stop(62%,#008a00), color-stop(100%,#005700));
    background: -webkit-linear-gradient(top, #83c783 0%,#52b152 33%,#008a00 62%,#005700 100%);
    background: -o-linear-gradient(top, #83c783 0%,#52b152 33%,#008a00 62%,#005700 100%);
    background: -ms-linear-gradient(top, #83c783 0%,#52b152 33%,#008a00 62%,#005700 100%);
    background: linear-gradient(to bottom, #83c783 0%,#52b152 33%,#008a00 62%,#005700 100%);
}

div.wppb-progress > span {
    display: block;
    height: 25px;
    -moz-border-radius: 30px;
    -o-border-radius: 30px;
    border-radius: 30px;
    background: #5a84c4;
    background: -moz-linear-gradient(top, #5a84c4 0%, #1a2275 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5a84c4), color-stop(100%,#1a2275));
    background: -webkit-linear-gradient(top, #5a84c4 0%,#1a2275 100%);
    background: -o-linear-gradient(top, #5a84c4 0%,#1a2275 100%);
    background: -ms-linear-gradient(top, #5a84c4 0%,#1a2275 100%);
    background: linear-gradient(top, #5a84c4 0%,#1a2275 100%);
    -webkit-box-shadow: inset 0 2px 9px rgb(255 255 255 / 30%), inset 0 -2px 6px rgb(0 0 0 / 40%);
    -moz-box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
    box-shadow: inset 0 2px 9px rgb(255 255 255 / 30%), inset 0 -2px 6px rgb(0 0 0 / 40%);
    overflow: hidden;
    position: relative;
}

let barElement = document.getElementsByClassName("bar");
for (let i = 0; i < barElement.length; i++) {
  let wrapper = barElement[i].firstElementChild;
  let bar = wrapper.firstElementChild;
  let span = bar.firstElementChild;
  let score = barElement[i].getAttribute("data-score");
  let low = barElement[i].getAttribute("data-less");
  let high = barElement[i].getAttribute("data-more");
  if (score < low) {
    span.classList.remove("yellow");
    span.classList.add("green");
  } if (score > high) {
    span.classList.remove("yellow");
    span.classList.add("red");
  }
}

工作示例： https://codepen.io/nick-io/nick-io/nick----- Gregory-the-looper/pen/wvympmg