0

リストから選択したフォント名でクラスを設定したいと思います。ユーザーが別のフォントを選択すると、既存のクラスが削除され、新しいクラスが設定されます。

ここに私のバグのあるJSがあります:

$(document).on('click', '.fonts-container ul li', function(){ 
   if ( $('.font2').hasClass("active")) {
    var fontName = $(this).data("fontname");
    $(this).closest(".editor").find('.text').toggleClass(fontName);
    }
   }
});

ここにリストがあります：

<ul >
  <li  data-fontname="Aclonica">Aclonica</li>
  <li  data-fontname="Acme">Acme</li>
  <li  data-fontname="Alegreya">Alegreya</li>
</ul>

したがって、結果要素のテキストには、.text とフォント名の 2 つのクラスがあります。

4

2 に答える 2

1

クラスのスワッピングをスキップし、jQuery を使用してインライン font-family スタイル プロパティを設定することをお勧めします。プロパティを使用してdata-fontname、クラス名の代わりに有効なフォント名を指定し、それらを直接設定します。そうすれば、font-familyルールは単純に上書きされるため、最初に以前の値を設定解除する必要はありません。

また、リストがマークアップの変更の影響を受けにくくなるように、リストを含む要素data-targetに属性を挿入します。ul

<ul data-target=".editor1">
  <li data-fontname="Aclonica">Aclonica</li>
  <li data-fontname="Acme">Acme</li>
  <li data-fontname="Alegreya">Alegreya</li>
</ul>

$('.fonts-container > ul > li').on('click', function(){
  var $el = $(this);
  var fontName = $el.data('fontname');
  var $target = $($($el.parent()).data('target'));
  $target.css('font-family', fontName);
});

あなたのJSには、質問の範囲外と思われる説明のつかない部分があったので、わかりやすくするためにそれらを省略しました。

于 2013-10-18T08:36:34.947 に答える