# 如何为 Discourse Subscriptions 插件中的计划按钮添加唯一的 CSS 标识符

**URL:** <https://meta.discourse.org/t/how-to-add-unique-css-identifiers-for-plan-buttons-in-discourse-subscriptions-plugin/186647>\
**Category:** Development\
**Tags:** subscriptions\
**Created:** [2021年四月13日 08:53 UTC](https://meta.discourse.org/t/how-to-add-unique-css-identifiers-for-plan-buttons-in-discourse-subscriptions-plugin/186647 "2021-04-13T08:53:34Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![MrDavis97](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mrdavis97/32/206391_2.png) [@MrDavis97](https://meta.discourse.org/u/MrDavis97)\
**Post date:** [2021年四月13日 08:53 UTC](https://meta.discourse.org/t/how-to-add-unique-css-identifiers-for-plan-buttons-in-discourse-subscriptions-plugin/186647/1 "2021-04-13T08:53:35Z")

</div>

我想修改 [这个](https://github.com/discourse/discourse-subscriptions/blob/252a11ed15bf81330e3ddcd8f52661ff92b77bba/assets/javascripts/discourse/templates/components/payment-options.hbs) 模板，让每个支付选项都带上一个我可以用来单独修改按钮的类名。目前看来，似乎没有方法可以单独定位这些计划按钮。如果我的理解有误，请告诉我。

基本上，我希望确保下面的代码中每个 `payment-plan` 都带有自己的类名，例如 `button1` 或 `button2` 之类的。

```plaintext
<div class="subscribe-buttons">
  {{#each orderedPlans as |plan|}}
    {{payment-plan plan=plan selectedPlan=selectedPlan clickPlan=(action "clickPlan")}}
  {{/each}}
</div>

```

---

<div class="post-metadata">

**Author:** ![MrDavis97](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mrdavis97/32/206391_2.png) [@MrDavis97](https://meta.discourse.org/u/MrDavis97)\
**Post date:** [2021年四月13日 18:50 UTC](https://meta.discourse.org/t/how-to-add-unique-css-identifiers-for-plan-buttons-in-discourse-subscriptions-plugin/186647/2 "2021-04-13T18:50:51Z")

</div>

已经解决了，供感兴趣的朋友参考。Ember.js 有一个很棒的特性，可以在循环中获取索引，同时还有一个辅助函数可以将该索引与字符串拼接：

```plaintext
<script type="text/x-handlebars" data-template-name="javascripts/components/payment-options">
    <p>
        {{i18n "discourse_subscriptions.plans.select"}}
    </p>
    
    <div class="subscribe-buttons">
        {{#each orderedPlans as |plan i|}}
            {{payment-plan plan=plan selectedPlan=selectedPlan clickPlan=(action "clickPlan") elementId=(concat 'button' i)}}
        {{/each}}
    </div>
</script>

```