如何让Pardot上的Jq脚本更短更高效

Question

我编写这段代码是为了让下拉菜单在选择时设置一个 class 值，以便在需要选择时知道我选择了什么使其变为红色。

问题是它是 Pardot，我无法更改 HTML。这就是我的（class 是我设置的）

p.Environment select option

每个下拉菜单的 class 变化该值为 Pardot

设置的数字

有没有可能我可以使此代码成为适用于所有 3 个下拉菜单但识别我单击的下拉菜单的一个函数？

<script>
// ---------Environment Dropdown Error-----------
(function() {
var selectedOption = 'option815221';
var drop = '.Environment';
$(drop).addClass(selectedOption);
$(drop+' select').change(function(){
    $(drop).removeClass(selectedOption).addClass("option"+$(this).val());
    selectedOption = "option"+$(this).val();
});
})();
// ---------Country Dropdown Error-----------
(function() {
var selectedOption = 'option815237';
var drop = '.country';
$(drop).addClass(selectedOption);
$(drop+' select').change(function(){
    $(drop).removeClass(selectedOption).addClass("option"+$(this).val());
    selectedOption = "option"+$(this).val();
});
})();
// ---------State Dropdown Error-----------
(function() {
var selectedOption = 'option824913';
var drop = '.state';
$(drop).addClass(selectedOption);
$(drop+' select').change(function(){
    $(drop).removeClass(selectedOption).addClass("option"+$(this).val());
    selectedOption = "option"+$(this).val();
});
})();
</script>

Answer 1

像这样的东西应该可以解决问题。

var optionsAndDrops = [
  ["option815221", ".Environment"],
  ["option815237", ".country"],
  ["option824913", ".state"],
];
optionsAndDrops.forEach(([selectedOption, drop]) => {
  $(drop).addClass(selectedOption);
  $(drop + " select").change(function() {
    $(drop)
      .removeClass(selectedOption)
      .addClass("option" + $(this).val());
    selectedOption = "option" + $(this).val();
  });
});

编辑：或者，也许更清楚，将逻辑包装在一个真正命名的函数中，然后调用它三次：

function setupDropdown(drop, selectedOption) {
  $(drop).addClass(selectedOption);
  $(drop + " select").change(function() {
    $(drop)
      .removeClass(selectedOption)
      .addClass("option" + $(this).val());
    selectedOption = "option" + $(this).val();
  });
}

setupDropdown(".Environment", "option815221");
setupDropdown(".country", "option815237");
setupDropdown(".state", "option824913");

如何让Pardot上的Jq脚本更短更高效

how to make Jq script on Pardot shorten and more efficient

performance

jquery

coding-efficiency

dropdown

pardot