Question

我正在开发一个应用了Cufon的网站。在cufon之前，我有以下标记：

<label class="option" for="edit-delivery-method-U.S.-postal-delivery">
  <input type="radio" id="edit-delivery-method-U.S.-postal-delivery" name="delivery-method" value="U.S. postal delivery" checked="checked" class="form-radio" />
  U.S. postal delivery 
</label>

在Cufon之后，文本被替换为4个Cufon-＆gt;画布标签，替换了每个文字。

<label class="option" for="edit-delivery-method-U.S.-postal-delivery">
<input type="radio" id="edit-delivery-method-U.S.-postal-delivery" name="delivery-method" value="U.S. postal delivery" checked="checked" class="form-radio"> 
<cufon class="cufon cufon-canvas" alt=" " style="width: 4px; height: 14px;"><canvas width="20" height="17" style="width: 20px; height: 17px; top: -2px; left: -2px;"></canvas><cufontext> </cufontext></cufon>
<cufon class="cufon cufon-canvas" alt="U.S. " style="width: 25px; height: 14px;"><canvas width="41" height="17" style="width: 41px; height: 17px; top: -2px; left: -2px;"></canvas><cufontext>U.S. </cufontext></cufon>
<cufon class="cufon cufon-canvas" alt="postal " style="width: 39px; height: 14px;"><canvas width="54" height="17" style="width: 54px; height: 17px; top: -2px; left: -2px;"></canvas><cufontext>postal </cufontext></cufon>
<cufon class="cufon cufon-canvas" alt="delivery" style="width: 46px; height: 14px;"><canvas width="59" height="17" style="width: 59px; height: 17px; top: -2px; left: -2px;"></canvas><cufontext>delivery</cufontext></cufon>
</label>

我想在点击事件中动态更改此文字。我不知道如何使用jQuery正确地定位这个以更改文本。在这里查看Cufon API https://github.com/sorccu/cufon/wiki/API时，我发现了一些我认为可能有用的东西，但它不适用于我。这是我的代码：

 var usPostalOneYearLabel = $('#edit-delivery-method-U.S.-postal-delivery-wrapper label');
var deliveryMethod = $('input[name="delivery-method"]');
deliveryMethod.change(function() {
    if(deliveryMethod.filter(':checked').val() === "U.S. postal delivery") {
        console.log('yay!');
        var html = usPostalOneYearLabel.html();
        Cufon.replace(usPostalOneYearLabel, {
            modifyText: function() {
                return 'hello world';
            }
        });
        Cufon.refresh(usPostalOneYearLabel);
        console.log('html');
    }
});

有人能指出我在正确的方向吗？

Answer 1

我找到了解决方案：

首先：替换cufon标签的alt属性。

<cufon class="cufon cufon-canvas" alt="Home"

到：

<cufon class="cufon cufon-canvas" alt="Lorem"

第二次在javascript中执行：

Cufon.replace('.menu-item a');

在我的情况下。（适用于每个要替换的元素）

如何动态更改Cufon应用于它的文本

1 个答案: