代码清理 - 几个 JQuery 弹出窗口

Question

我正在为客户使用重复模块，以便在其页面上的每个产品元素上弹出一个弹出窗口。我的代码可以工作，但我想它非常臃肿，可能有一种方法可以更简洁地编写它。任何帮助找到一种更简洁的方式来编写它都会很有帮助。

$(document).ready(function() {
    $("a.popbtn1").on("click", function(e) {
        e.preventDefault();
        $(this).simplePopup({ type: "html", htmlSelector: "#poppost1" });
    });
    $("a.popbtn2").on("click", function(e) {
        e.preventDefault();
        $(this).simplePopup({ type: "html", htmlSelector: "#poppost2" });
    });
    $("a.popbtn3").on("click", function(e) {
        e.preventDefault();
        $(this).simplePopup({ type: "html", htmlSelector: "#poppost3" });
    });
    $("a.popbtn4").on("click", function(e) {
        e.preventDefault();
        $(this).simplePopup({ type: "html", htmlSelector: "#poppost4" });
    });
});

Answer 1

这应该对你有用：

$(document).ready(function() {
  $("a[class^=popbtn]").on("click", function(e) {
    e.preventDefault();
    var theClass = $(this).attr("class").match(/popbtn[\w-]*\b/).toString().replace("popbtn", "");
    console.log(theClass)
    $(this).simplePopup({
      type: "html",
      htmlSelector: "#poppost" + theClass
    });
  });

});

演示

$(document).ready(function() {
  $("a[class^=popbtn]").on("click", function(e) {
    e.preventDefault();
    var theClass = $(this).attr("class").match(/popbtn[\w-]*\b/).toString().replace("popbtn", "");
    console.log(theClass)
    $(this).simplePopup({
      type: "html",
      htmlSelector: "#poppost" + theClass
    });
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="popbtn1">test</a>