jQuery的動態切換功能？

我試圖用jQuery創建一個靈活的切換功能，其中我將要切換的項目的ID作爲參數進行切換。該功能由鏈接將正確的ID傳遞給函數來觸發。jQuery的動態切換功能？

這裏是目前的代碼：

function boldToggler(itemid){ 
$(itemid).toggle(function(){ 
    $(itemid).css("font-weight","bold");}, 
function(){ 
    $(itemid).css("font-weight","normal");}); 
}

這是由像這樣的鏈接觸發：

<a href="javascript: boldToggler('h1')">toggle style for this item</a> 
<a href="javascript: boldToggler('h2')">toggle style for this item</a>

是有沒有辦法得到這個工作？它可以節省我編寫數百個切換功能！

任何幫助將是驚人的，感謝

來源

2012-09-05 Joe

'toggle'函數在jquery –

你的意思是這樣嗎？

function boldToggler(itemid) { 
    $(itemid).css("font-weight", function(i, val) { 
     return val == "bold" ? "normal" : "bold"; 
    }); 
}

DEMO：http://jsfiddle.net/kbQXd/

來源

2012-09-05 11:58:45 VisioN

的最新版本中被棄用了，我會贊成這個，因爲使用類或d不建議使用toggle（）函數並不是真正的答案。 – adeneo

您的示例僅用於粗體顯示文本。不工作將其恢復正常。我將return語句改爲'return val == 700？ 400：700;'和它的工作，小提琴：http://jsfiddle.net/kbQXd/1/ –

@ClydeLobo奇怪。礦井工作正常。 – VisioN

你錯過了 '＃'：

$('#'+itemid).css....

來源

2012-09-05 11:58:03 Th0rndike

您可以使用jQuery中的toggleClass方法。

<a href="javascript: $('h2').toggleClass(bold);">toggle style for this item</a>

你只需要定義類：

.bold { font-weight: bold; }

來源

2012-09-05 11:59:12

function boldToggler(itemid){ 
    if($('#'+itemid).css("font-weight") == "normal"){ 
     $('#'+itemid).css("font-weight",'bold'); 
    }else{ 
     $('#'+itemid).css("font-weight",'normal'); 
    } 
}

來源

2012-09-05 11:59:54 Salketer

改變你的函數這個

function boldToggler(itemid){ 
$('#' + itemid).toggle(function(){ 
    $('#' + itemid).css("font-weight","bold");}, 
function(){ 
    $('#' + itemid).css("font-weight","normal");}); 
}

來源

2012-09-05 12:00:14 rahul

也許這種替代代碼可能是有用的 - 小提琴：http://jsfiddle.net/9zxbT/

HTML

<a href="#" data-toggle="h1">toggle style for H1</a> 
<a href="#" data-toggle="h2">toggle style for H2</a> 

<h1>this is H1</h1> 
<h2>this is H2</h2>

CSS

.bold { font-weight: bold; }

jQuery的

$('a[data-toggle]').on('click', function(evt) { 
    evt.preventDefault(); 
    $($(this).data('toggle')).toggleClass('bold'); 
});

這完全消除您的在線處理程序，執行的JavaScript和CSS更好的分離和利用data-*屬性設置所需選擇器

來源

2012-09-05 12:03:40 fcalderan

我*發誓*我沒有偷你的想法...看起來像偉大的思想一樣！ – Jamiec

嗨，大家好，代碼和感謝您的建議 - 對於我的特定應用程序，我需要直接編輯html而無需使用額外的類（它用於cms模板編輯器） - 我將留意您對未來數據類型的建議！謝謝，joe – Joe

我試圖改變你的標記一點使其多一點的jQuery肥胖型：

<a href="#" class="boldToggler" data-selector="h1">toggle style for h1</a> 
<a href="#" class="boldToggler" data-selector="h2">toggle style for h2</a>

然後使用等的方法：

$('.boldToggler').click(function(){ 
    var itemSelector = $(this).data('selector'); 
    $(itemSelector).toggleClass('bold'); 
});

隨着定義爲CSS類：

.bold{ 
font-weight:bold; 
}

直播例如：http://jsfiddle.net/NTSzs/

來源

2012-09-05 12:05:32 Jamiec

在我的解決方案，你可以避免類，並簡單地使用'a [數據選擇器] – fcalderan

@FabrizioCalderan - 是的，完全同意。儘管如此，我仍會保留這種看法，以解決這個問題。畢竟，他可能想要一個'italicToggler'也使用相同的'data-selector'屬性，但改變一個不同的cssClass！ – Jamiec

jQuery的動態切換功能？

回答

相關問題