Question

很抱歉，但我真的是jquery的新手。

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

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

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

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

文本总是在#breadcrumbs里面调用。

有没有办法缩短这个脚本？提前致谢任何建议都是受欢迎的。

Answer 1

类似的东西：

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

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

Answer 2

尝试使用.each()

Answer 3

我没有测试过，但这应该有效：

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

Answer 4

您可以为每个菜单元素分配相同的调用，唯一的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属性。

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

Answer 5

正如其他人所建议的那样，从现有元素中取名，然后使用公共类来连接点击代理。

如果您没有显示应该显示的文字，可以尝试将其输出为data-*属性...

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

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

缩短jquery脚本

5 个答案: