Question

我现在在一个项目上工作，我有一个下拉列表，在下拉列表中有很多链接。所以我现在正在做的就是我在下面的每个按钮。有很多。

$(".button1").click(function() {
    $(".contentContainer").load( "pages/functional_components_controlPanels.html" );
});

有人会指出一种更优雅的方式来减少我的代码吗？任何帮助将不胜感激。

Answer 1

使用按钮上的属性（或下拉选项，或链接或您喜欢的任何元素）来代替数据驱动代码：

示例Html（对于您需要的任何额外值，data-属性）：

<input type="button" data-content="pages/functional_components_controlPanels.html"/>

示例代码（使用data-属性）：

// Apply this only to inputs with data-content attributes (could be any filter you like)
$("input[data-content]").click(function() {

    // Extract values you need from attribute on the clicked item
    var content = $(this).data('content');

    // use the values to make decisions, specify parameters etc
    $(".contentContainer").load(content);
});

插件，如不显眼的ajax，使用data-属性，因此它们不必硬连接到元素。

以data-前缀开头的属性是浏览器的允许标准，并且是有效的HTML（其他属性名称并非始终有效，因此请使用data-前缀。）

我需要帮助巩固我的职能

1 个答案: