将多个jquery -click-函数合并为一个

Get multiple jQuery-click-functions into one

本文关键字：一个 函数 jquery -click- 合并      更新时间：2023-09-26

我在我的网站上有几个模块，每个模块都可以被用户禁用。我的问题是，我对每个模块都有一个完整的脚本，因此我的问题:我怎么能把它变成一个脚本(->也许一个jQuery-click-function?)

(我省略了数据库部分模块是否启用或禁用，因为它不相关)

<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>

您的方法是相同的，并且可以很容易地转换为对所有模块使用单个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);
        }
    );
});
相关文章：