Question

我目前正在为Hitbox.tv创建一个用户脚本/扩展名; mod的基本思想是用Twitch.tv上的图像替换某些单词，我已经完成了。现在我需要帮助的是找到基于某些人的消息或名称创建徽章符号的最简单方法。例如，如果是，名为＆＃34; GamingTom＆＃34;的用户发送消息时，会在其名称左侧显示一个小符号。

我已经看过一些方法，但无法获得任何工作。我认为可能有两种选择：

<li ng-repeat="message in messages" class="from_GamingTom user buffer_" compile="message.html" ng-class="{isOwner:message.isOwner, isMod:message.isMod}">

document.getElementsByClassName

或：

<span class="name" ng-click="userTooltip(message.name)" style="color:#FA58AC;border-color:#FA58AC">GamingTom</span>

我对javascript相当新，所以任何帮助都将不胜感激。如果这些都没有任何意义，那就说出来，我会试着让自己更清楚。非常感谢！

编辑：

只是为了让您知道，我无论如何都无法编辑HTML。我无权访问源文件，所以我能做到这一点的唯一方法就是使用扩展中的某种javascript，如果这样做有意义的话。此外，用户旁边显示的图像仅适用于某些用户，比如捐赠者，并且只是一个设定的图像;不是他们的化身或任何东西。在检查html后，我提供的代码直接来自网站，我选择了这两组代码，因为它们都有用户名，所以我认为它们最容易用于此目的。我希望这个编辑有所帮助！

Answer 1

虽然您没有提供太多代码可以使用，但是请尝试扩展您的第一行代码。看起来你正在尝试使用Angular来实现这一目标。所以要做一些类似的事情你可以在你的img添加li标签。例如

<li ng-repeat="message in messages" class="from_GamingTom user buffer_" compile="message.html" ng-class="{isOwner:message.isOwner, isMod:message.isMod}">
<img ng-src="{message.pic}"/>
</li>

然后使用css设置img和li的样式以获得您想要的效果。

Answer 2

如果messages数组中的每个项目都有关于谁发送消息的信息，那么这将是最容易完成的。

您还需要设置一个函数来获取与特定用户关联的图像。（我假设它是用户的头像）。现在让我们假设您有一个获取特定用户名的函数，并返回该用户的图像的URL。我们称之为getImageForUser()。

然后你会做这样的事情：

<ul>
  <li ng-repeat="message in messages">
    <img ng-src="{{ getImageForUser(message.user) }}" />
    <span>{{ message.text }}</span>
  </li>
</ul>

- 编辑 -

如果您在控制器中设置getImageForUser功能，请执行以下操作：

$scope.getImageForUser = function(username) {
  // query your database or some other way of getting avatar
  return avatar_url;
}

然后您需要在ng-repeat中使用父作用域，如下所示：

<ul>
  <li ng-repeat="message in messages">
    <img ng-src="{{ $parent.getImageForUser(message.user) }}" />
    <span>{{ message.text }}</span>
  </li>
</ul>

基于类创建内嵌图像

2 个答案: