Question

我的网站上有一些模块，用户可以禁用每个模块。 我的问题是我为每个模块提供了一个完整的脚本，因此我的问题是：如何将其转换为一个脚本（＆gt;也许一个jQuery-click-function？）

（我省略了数据库 - 无论模块是启用还是禁用，因为它不相关）

HTML

<div class="border f12" style="width: 200px">
    <b>Weather Module</b>
    <p style="text-align: justify; margin: 0px;">Description</p><br>';
    <button action="del" startmodule="weather" id="submit_weather"><span class="ui-button-icon-primary ui-icon ui-icon-trash"></span><span class="ui-button-text">disable/enable</span></button>
</div>
<div class="border f12" style="width: 200px">
    <b>Infos Module</b>
    <p style="text-align: justify; margin: 0px;">Description</p><br>';
    <button action="del" startmodule="infos" id="submit_infos"><span class="ui-button-icon-primary ui-icon ui-icon-trash"></span><span class="ui-button-text">disable/enable</span></button>
</div>

JAVASCRIPT

<script>
    $("#submit_infos").click(function() {
        $(".ajax_response").empty();
        $.post("settings/settings_startmodule.php", 
            {
                ajax_action: $("#submit_infos").attr("action"),
                ajax_startmodule: $("#submit_infos").attr("startmodule")
            },
            function(data) {
                $(".ajax_response").html(data);
            }
        );
    });
    $("#submit_weather").click(function() {
        $(".ajax_response").empty();
        $.post("settings/settings_startmodule.php", 
            {
                ajax_action: $("#submit_weather").attr("action"),
                ajax_startmodule: $("#submit_weather").attr("startmodule")
            },
            function(data) {
                $(".ajax_response").html(data);
            }
        );
    });
</script>

Answer 1

您的方法是相同的，并且可以轻松转换为对所有模块使用单个click处理程序。您需要一些方法来选择模块中使用的所有按钮 - 从您的HTML我可以发现一堆方式

div.f12 button作为选择 - 相当不错
button[startmodule]作为选择器 - 相当不错但速度较慢
button[id^='submit_']作为选择 - 相当糟糕！慢，可能容易出错

然而，最好的方法是在每个按钮上都有一个公共类，并将其用作选择器。

<button class="module-button" action="del" startmodule="infos">...</button>

考虑到选择所有按钮的常用方法，只需使用此脚本（假设所有按钮上都有一个公共类module-button）：

$(".module-button").click(function() {
    $(".ajax_response").empty();
    var $this = $(this); // variable refers to the button having been clicked
    $.post("settings/settings_startmodule.php", 
        {
            ajax_action: $this.attr("action"),
            ajax_startmodule: $this.attr("startmodule")
        },
        function(data) {
            $(".ajax_response").html(data);
        }
    );
});

将多个jQuery-click-functions合二为一

1 个答案: