0

1つのリンクに含める必要のあるフォントリサイザーがあります。例えば。テキストリンク「大きいタイプ」を表示し、クリックすると「小さいタイプ」のテキストリンクに切り替わります。クラス「プラス/マイナス」を切り替える理由がわかりませんが、elseステートメントの後にテキストを切り替えたりフォントサイズ変更関数を呼び出したりしませんか？

現在、最初のクリックでテキストのサイズを変更し、マイナスクラスを追加しますが、その後は何もしません。

http://jsfiddle.net/infatti/P6SVv/

var targetContainers = $('.two-thirds');
var newLargerSize = 16;
var newSmallerSize = 14;
$('.resize-font a').click(function(){

if ($(this).hasClass('plus')) {

    $(targetContainers).css('font-size', newLargerSize);

    $(this).text('Smaller Type').toggleClass('minus');

} else {

    $(targetContainers).css('font-size', newSmallerSize);

    $(this).text('Larger Type').toggleClass('plus');

};

});
4

2 に答える 2

0

あなたの状態はあなたのトグルで調整されていません。

aにクラスがあるかどうかを確認しplusますが、ある場合は、プラスを削除することはなく、マイナスを削除（または追加）します。

常にプラスを切り替えて、存在する場合は削除し、存在しない場合は追加する必要があります。

$('.resize-font a').click(function() {
   var hasPlus = $(this).hasClass('plus');
   $(targetContainers).css('font-size', hasPlus ? newLargerSize : newSmallerSize);

   $(this).text(hasPlus ? 'Smaller Type' : 'Larger Type').toggleClass('plus');
});

スタイリングにマイナスが必要な場合は、常に両方を切り替える必要があります。

$(this).text(hasPlus ? 'Smaller Type' : 'Larger Type').toggleClass('plus minus');
于 2012-08-07T13:32:25.433 に答える
0

問題はtoggleClass（）にあります

これで問題が解決するので、ご覧ください http://jsfiddle.net/3w2nG/

于 2012-08-07T13:40:27.507 に答える