爲列表選擇班級並只設置其中一個

我想設置一個班級，列表中選擇的是字體名稱。當用戶選擇不同的字體時，現有的類將被刪除並設置新的類。爲列表選擇班級並只設置其中一個

這裏是我的車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和字體名稱

來源

2013-10-18 lipenco

我建議跳過級交換和設置使用jQuery的內嵌字體家庭風格的酒店。使用data-fontname屬性指定有效的字體名稱而不是類名稱，並直接設置它們。這樣，font-family規則就被覆蓋了，所以你不需要先取消先前的值。

此外，插入包含列表中的ul元件上的data-target屬性所以列表變得不太敏感來標記的變化。

<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-18 08:36:34 nordhagen

你還沒有給出所有的HTML片段。這是一個模擬演示：http://jsfiddle.net/m2rHL/

$(document).on('click', '.fonts-container ul li', function(){ 
    var fontName = $(this).data("fontname"); 
    //alert(fontName + " " + $(".editor").find('.text').length); 
    $(".editor").find('.text').addClass(fontName); });

來源

2013-10-18 08:27:27 closure

但現在.text有所有3類字體，我應該只有一個。 – lipenco

@lipenco爲什麼你不做小提琴，它是一種更好更快的方式來解決問題 – Rex

我們可以記住最後一個添加的類作爲數據屬性。請參閱修改：http：//jsfiddle.net/raghavv/m2rHL/2/ – closure

爲列表選擇班級並只設置其中一個

回答

相關問題