縮短jquery腳本

對不起，但我真的是jquery新手。縮短jquery腳本

$(".productTopMenu").click(function() { 
     $("#breadcrumbs").html("Home/<strong>Product</strong>"); 
    }); 

$(".downloadTopMenu").click(function() { 
     $("#breadcrumbs").html("Home/<strong>Download</strong>"); 
    });

這是一個麪包屑。點擊每個.productTopMenu，#breadcrumbs將調用文本。如果有15頁，我必須再放13個該腳本的副本。如何縮短這個腳本，如：

.productTopMenu = Home/<strong>Product</strong> 
.downloadTopMenu = "Home/<strong>Download</strong>

文本總是叫內#breadcrumbs。

有沒有辦法縮短這個腳本？在此先感謝任何建議，歡迎。

來源

2011-08-24 syads321

是否有div，span或其他包含點擊元素（產品，下載等）文本的元素？ –

喜歡的東西：

$('[class$="TopMenu"]').click(function() { 
    $("#breadcrumbs").html("Home/<strong>" + getNameFromClass(this.className) 
     + "</strong>"); 
}); 

function getNameFromClass(theClass) { 
     // take substring and make title case here 
}

來源

2011-08-24 09:13:36 DhruvPathak

嘗試使用.each()

來源

2011-08-24 09:14:48 xdazz

儘管你的答案是朝着正確的方向發展，但對jquery新手來說幫助不大。嘗試更精確一點，或者添加一個例子。 –

@TJ在jQuery的手冊中有一些例子，所以我傾向於不重複。 – xdazz

好點，你去:-) –

我沒有測試過，但是這應該工作：

// your data as an array containing objects 
var item = [ 
{ 
    "selector" : ".productTopMenu", 
    "label" : "Product" 
}, 
{ 
    "selector" : ".downloadTopMenu", 
    "label" : "Download" 
} 
], 

i = item.length - 1, 
$breadcrumbs = $('#breadcrumbs'); // Dom Cache 

while (i >= 0) { 
    (function (i) { 
     $(item[i].selector).click(function() { 
     $breadcrumbs.html('Home/<strong>' + item[i].label + '</strong>'); 
     }); 
    }(i)); 
}

來源

2011-08-24 09:17:43

你可以給每個這個菜單元素相同的呼叫，唯一ID並且有一個映射id -> text：

var paths = { 
    'productTopMenu': "Home/<strong>Product</strong>", 
    'downloadTopMenu': "Home/<strong>Download</strong>" 
}; 

$('.menuItem').click(function() { 
    if(paths[this.id]) { 
     $("#breadcrumbs").html(paths[this.id]) 
    } 
});

DEMO

你也可以使用一個data-屬性來存儲一些標識符，它並沒有成爲id屬性。

當然還有其他方法。您必須決定您想要解決方案的自動或靈活程度。

來源

2011-08-24 09:23:49

我真的很感興趣你的腳本，我已經嘗試過，但它不工作。你能告訴我只是簡單的完整腳本，謝謝。 – syads321

@syads：你在這裏：http://jsfiddle.net/fkling/qvFgW/ –

正如其他人所建議的，從現有元素中取出名稱，然後使用通用類來連接點擊委託。

如果你還沒有文字，因爲它應該會出現，你可以嘗試輸出它作爲一個data-*屬性...

<a href="#" data-title="Downloads" />Go to Downloads</a>

這樣，你可以從一切單獨控制的名字，至少。

來源

2011-08-24 09:25:32 Kieron

縮短jquery腳本

回答

相關問題