Очистка кода - несколько всплывающих окон 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>