Question

我正在构建一个系统，以便可以即时更新玩家统计信息。使我所有的代码都可以正常工作，甚至可以构建出来，因此统计信息的最大值可以大于100，而竖线仍可以按百分比工作。

我什至得到了它，所以我可以有多个条（请参见注释掉的代码），但是后来我发现一个问题，如果我更新一个文件，它将占用该百分比并更新另一个文件，则它们需要独立于每个文件进行更新其他。

首先，我要咬一下子弹，然后做3个非常相似的功能：一个用于HP，一个用于装甲，一个用于能源。但是由于我有5个播放器，并且我想让页面顶部更新它们，所以这意味着制作15个真正多余的脚本

我希望您能帮助我找到一种“模板化”系统的方法，这样我就可以拥有“无限”个播放器，并且只有一个功能可以更新其中任何一个

为了使事情更容易理解，我设置了一个JSfiddle：https://jsfiddle.net/nekollx/7o3bdwyt/3/

此外：我只是出于某种原因注意到，当您打开小提琴时，它没有显示CSS，因此包含在下面

      body {
          margin: 0px 0px 0px 0px;
          padding: 0px 0px 0px 0px;
      }

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 4px;
}

      .CharInfo {
        -webkit-transform: rotate(-180deg);
        -moz-transform: rotate(-180deg);
        -o-transform: rotate(-180deg);
        transform: rotate(-180deg);
        -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
        filter: progid: dximagetransform.microsoft.basicimage(rotation=2);
        font-weight: bolder;
        color: white;
        -webkit-text-stroke: 0.05em #000;
        font-size: x-large;
        padding: 0px 0px 0px 10px;
      }

      .line {
        width: 200px;
      }

      .stripesLoader {
        margin: 4px;
        height: 30px;
        position: relative;
        background: linear-gradient(90deg, #eee 50%, transparent 50%);
        background-color: crimson;
        background-size: 200%;
        background-position: 80%;
        width: 50%;
        border-radius: 5px;
        transform: scale(-1);
        transition: 0.3s;
      }

      .stripesLoader: before {
        content: "";
        position: absolute;
        width: 50%;
        height: 100%;
        border-radius: 5px;
        background:
        linear-gradient(
          45deg,
          transparent 25%,
          rgba(238, 238, 238, 0.5) 25%,
          rgba(238, 238, 238, 0.5) 30%,
          transparent 30%,
          transparent 35%,
          rgba(238, 238, 238, 0.5) 35%,
          rgba(238, 238, 238, 0.5) 70%,
          transparent 70%
        );
        animation: shift 2s linear infinite;
        background-size: 60px 100%;
        box-shadow:
          inset 0 0px 1px rgba(0, 0, 0, 0.2),
          inset 0 -2px 1px rgba(0, 0, 0, 0.2);
      }

      @keyframes shift {
        to {
          background-position: 60px 100%;
        }
      }

Answer 1

好吧，我想我已经回答了！

因此，基本上，您需要处理自己的ID，以便可以为所有玩家/属性制作一个脚本。

我用div包裹了您的播放器：<div id='player0'>
我已将您的jq值更改为每个HP，Armour和Energy（jqValueHP, jqValueArmor, jqValueEnerg）分开
创建了一个playerclone函数，该函数将克隆您的player0 div并为下一个索引更改其ID。
添加一个按钮以创建更多玩家，这些玩家将调用playerclone并增加玩家计数器。

这里是fiddle！

编辑： 我为xxx和yyy字段here做了一个新的提琴。请注意，xxx字段将始终具有您为其他任何玩家设置的第一个玩家的值（因为我们正在克隆div）。

就动画而言，对我来说似乎不错。您链接的小提琴没有CSS，因此它的正常状态是不显示动画...

Answer 2

由于progress元素似乎是相应输入元素之前的元素，因此可以使用jQuery的prev方法。

我没有测试，但是类似这样：

function update(target) {
    var $progress = $(target).prev();
    // ...

    $progress.css('backgroundPosition', valeur+'%');

    if (valeur <= 25){
        $progress.css('backgroundColor', 'red');
    } 
    // .... etc
}

多个脚本还是一个？可以支持重复吗？

2 个答案: