Javascript 缩短jquery脚本

很抱歉这么问，但我在jquery方面真的是个新手

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

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

$（“.productTopMenu”）。单击（函数（）{
$（“#面包屑”）.html（“主页/产品”；
});
$（“.downloadTopMenu”）。单击（函数（）{
$（“#面包屑”）.html（“Home/下载””；
});

这是面包屑。每单击一次.productTopMenu，#面包屑将调用文本。 如果有15页，我必须再放13份剧本。 如何缩短该脚本，如：

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

.productTopMenu=Home/产品
.downloadTopMenu=“Home/下载

文本总是称为“内部面包屑”

有没有办法缩短这个脚本？ 提前谢谢 欢迎提出任何建议。

如：

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

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

$（'[class$=“TopMenu”]'）。单击（函数（）{
$（“#breadcrumbs”）.html（“Home/”+getNameFromClass（this.className）
+“”；
});
函数getNameFromClass（类）{
//使用子字符串并在此处设置标题大小写
}

尝试使用

我还没有测试过，但这应该可以：

// 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));
}

//将数据作为包含对象的数组
变量项=[
{
“选择器”：“.productTopMenu”，
“标签”：“产品”
},
{
“选择器”：“.downloadTopMenu”，
“标签”：“下载”
}
],
i=项目长度-1，
$breadcrumbs=$（'#breadcrumbs'）；//Dom缓存
而（i>=0）{
（职能（一）{
$（项[i]。选择器）。单击（函数（）{
$breadcrumbs.html（'Home/'+item[i].label+''）；
});
}（i） ）；
}

您可以为每个菜单元素提供相同的调用、唯一的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])
    }
});

var路径={
“productTopMenu”：“主页/产品”，
“downloadTopMenu”：“主页/下载”
};
$（'.menuItem'）。单击（函数（）{
if（路径[this.id]）{
$（“#breadcrumbs”）.html（路径[this.id]）
}
});

您还可以使用

data-

属性来存储一些标识符，它不必是

id

属性

---

当然还有其他方法。您必须决定解决方案的自动化程度或灵活性。

正如其他人所建议的，从现有元素中取名称，然后使用公共类连接click委托

如果您没有得到应该显示的文本，您可以尝试将其作为

data-*

属性输出

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

---

这样，您至少可以将名称与其他内容分开控制。

是否有div、span或任何其他元素包含所单击元素（产品、下载等）的文本？虽然你的答案是正确的，但对jquery新手没有多大帮助。请尽量精确一点，也许可以添加一个示例。@TJ jquery手册中有一些示例，所以我不想重复。我对你的脚本很感兴趣，我已经尝试过了，但它不起作用。你能给我看一下简单的完整脚本吗，谢谢