Question

我正在尝试访问或更准确地从其父模板中删除嵌套模板中的类。以下是我的代码的结构。

父模板

<template name='paymentTemplate'>
  <div class="progress-wrapper">
     {{>progressBar }}
  </div>
 </template>

儿童模板

<template name="progressBar">
<div class="progress">
      <div class="checkoutPrg progress-bar progress-bar-success" role="progressbar" aria-valuenow="25"
         aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
        Checkout
    </div>
    <div class="DeliveryPrg progress-bar progress-bar-danger " role="progressbar" aria-valuenow="25"
         aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
        Delivery
    </div>
    <div class="PaymentPrg progress-bar progress-bar-danger" role="progressbar" aria-valuenow="25"
         aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
        Payment
    </div>
    <div class="ConfirmationPrg progress-bar progress-bar-danger" role="progressbar" aria-valuenow="25"
         aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
        Confirmation
    </div>


</div>
</template>

所以，我的目标是从每个相应的div中删除类progress-bar-danger，并在运行中将其替换为progress-bar-success。任何想法如何实现？

Answer 1

假设你有一个在进度条完成时触发的函数，你可以像这样使用简单的jQuery：

$('.DeliveryPrg').removeClass('progress-bar-danger');
$('.DeliveryPrg').addClass('progress-bar-success');

这可以在父模板（如果运行完成函数的位置）或子模板中完成，或者甚至在完全不相关的其他模板中完成。唯一的要求是嵌套模板应该已经渲染。

直接选择DOM元素时，不要求必须由实际呈现该元素的模板完成。 DOM元素不知道哪个模板呈现它： - ）

在嵌套的流星模板中访问div

1 个答案: