javascript - 如何对 id 定义为 php 函数的元素使用 javascript？

Question

我正在建立一个网站，在其中一个页面中，我正在使用一个 php 函数来定义元素的 id。原因是元素重复并且 id 应该是唯一的，javascript 也可以根据元素的变化工作.我遇到的问题是，我无法根据元素id 的变化定义javascript 函数。 这是代码: HTML 部分:

<div id="star1s<?php the_ID(); ?>" class="rating"></div>   

在 html 部分，the_ID() 是更改元素 ID 以使元素 ID 唯一的 php 函数。 因此，例如，如果 the_ID() 返回 11，则 div id 变为 stars1s11。 这是javascript部分: JavaScript 部分:

 var getstarid = "<?php the_ID();?>";

function rating1(stars) {
  var ratingfill = stars;
  var rating_integer = Math.floor(ratingfill);
  var rating_decimal = ratingfill % 1;
  var rating_dec_trimmed = rating_decimal.toFixed(1);
  if ((rating_dec_trimmed == 0.1) || (rating_dec_trimmed == 0.2) ||
    (rating_dec_trimmed == 0.3) || (rating_dec_trimmed == 0.4)) {
    rate1.style.width = ((40 * rating_integer) + 18) + 'px';
  }
  if ((rating_dec_trimmed == 0.6) || (rating_dec_trimmed == 0.7) ||
    (rating_dec_trimmed == 0.8) || (rating_dec_trimmed == 0.9)) {
    rate1.style.width = ((40 * rating_integer) + 28) + 'px';
  }
  if (rating_dec_trimmed == 0.5) {
    rate1.style.width = ((40 * rating_integer) + 20) + 'px';
  }
  if (rating_dec_trimmed == 0) {
    rate1.style.width = (40 * rating_integer) + 'px';
  }
}
var getrate1 = "<?php echo $ratingonequery;?>";
rating1(getrate1);

在Javascript部分，我想根据php函数the_ID()用相应的id替换“rate1.style.width”中的“rate1”。所以，例如如果the_ID()返回11，id应该是star1s11

我也会分享风格 样式部分:

.rating {
  font-size: 48px;
  color: #0095f9;
  display: inline-block;
  overflow: hidden;
}

.rating::before {
  content: "\2605\2605\2605\2605\2605"
}

我还会放一张输出的屏幕截图。 此代码用于根据从数据库中获取的用户值显示星级。

提前致谢。

Answer 1

要实现您的目标，您应该将 rate1 替换为 document.getElementById("star1s"+getstarid)，其中 getstarid 是在您的 PHP 中定义的星级 ID。所以你的 javascript 代码应该是这样的:

var getstarid = "<?php the_ID();?>";

function rating1(stars) {
  var ratingfill = stars;
  var rating_integer = Math.floor(ratingfill);
  var rating_decimal = ratingfill % 1;
  var rating_dec_trimmed = rating_decimal.toFixed(1);
  if ((rating_dec_trimmed == 0.1) || (rating_dec_trimmed == 0.2) ||
    (rating_dec_trimmed == 0.3) || (rating_dec_trimmed == 0.4)) {
    document.getElementById("star1s"+getstarid).style.width = ((40 * rating_integer) + 18) + 'px';
  }
  if ((rating_dec_trimmed == 0.6) || (rating_dec_trimmed == 0.7) ||
    (rating_dec_trimmed == 0.8) || (rating_dec_trimmed == 0.9)) {
    document.getElementById("star1s"+getstarid).style.width = ((40 * rating_integer) + 28) + 'px';
  }
  if (rating_dec_trimmed == 0.5) {
    document.getElementById("star1s"+getstarid).style.width = ((40 * rating_integer) + 20) + 'px';
  }
  if (rating_dec_trimmed == 0) {
    document.getElementById("star1s"+getstarid).style.width = (40 * rating_integer) + 'px';
  }
}
var getrate1 = "<?php echo $ratingonequery;?>";
rating1(getrate1);