Как динамически изменить текст, к которому применен Cufon

Я работаю над сайтом, к которому применяется 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->canvas, заменяющими каждое слово текста.

<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, чтобы изменить текст. При просмотре API Cufon здесь 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');
    }
});

Может ли кто-нибудь указать мне правильное направление здесь?


jquery cufon
person user1015214    schedule 04.12.2014    source источник
comment
Похоже, что Cufon.replace и Cufon.refresh принимают первый параметр идентификатора, класса или другой ссылки CSS на ваш объект. Вы передаете сам объект jQuery (должен передавать строку '#edit-delivery-method-us-postal-delivery-wrapper', где вы передаете объект $('#edit-delivery-method-us-postal-delivery -wrapper'). Я бы попробовал удалить $() из первой строки вашего javascript и посмотреть, работает ли это.   -  person d3v1lman1337    schedule 05.12.2014

Ответы (1)


arrow_upward
1
arrow_downward

Я нашел решение:

Во-первых: замените атрибут alt тега cufon.

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

to : 

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

Второе выполнение в javascript:

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

в моем случае. (применяется для замены каждого элемента)

person user2267379    schedule 11.05.2015