javascript - 我无法调用我的 jQuery 函数

Question

我创建了一个 jQuery 函数，可以在单击按钮时添加和删除类。

灰色背景会根据您单击的按钮而变化，因为我每次都会添加和删除 active-button 类。

/* Add / remove the active button class */
jQuery(document).ready(function() {

  jQuery('.sm-btn-right').click(function() {
    jQuery('.sm-btn-right').addClass('active-button');
    jQuery('.sm-btn-left').removeClass('active-button');
  });

  jQuery('.sm-btn-left').click(function() {
    jQuery('.sm-btn-left').addClass('active-button');
    jQuery('.sm-btn-right').removeClass('active-button');
  });

});

.sm-btn-left {
  color: red;
}

.sm-btn-right {
  color: blue;
}

.active-button {
  background-color: #ddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>

<div class="server-location-button-wrap">
  <div class="sm-btn-left flag-map-btns map_btn active-button">
    Map
  </div>
  <div class="sm-btn-right flag-map-btns flags_btn">
    List
  </div>
</div>

然后我意识到我需要其他一些按钮的类似功能，所以我决定将其变成一个可重用的函数，我可以在需要时调用。但是，当我这样做时，该功能停止工作，active-button 类不会改变。

这是我将其分离为自己的可重用函数的(失败的)尝试。

/* Add / remove class */
function bgAddRemoveClass(elem1, elem2, theClassNoDot) {

  jQuery('elem1').click(function() {
    jQuery('elem1').addClass('theClassNoDot');
    jQuery('elem2').removeClass('theClassNoDot');
  });
  jQuery('elem2').click(function() {
    jQuery('elem2').addClass('theClassNoDot');
    jQuery('elem1').removeClass('theClassNoDot');
  });

}

/* Invoke the function */
jQuery(document).ready(function() {
  bgAddRemoveClass('.sm-btn-left', '.sm-btn-right', 'active-button');
});

.sm-btn-left {
  color: red;
}

.sm-btn-right {
  color: blue;
}

.active-button {
  background-color: #ddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>

<div class="server-location-button-wrap">
  <div class="sm-btn-left flag-map-btns map_btn active-button">
    Map
  </div>
  <div class="sm-btn-right flag-map-btns flags_btn">
    List
  </div>
</div>

我做错了什么？

Answer 1

删除引号，您需要变量而不是字符串

jQuery(elem1).click(function() {
    jQuery(elem1).addClass(theClassNoDot);
    jQuery(elem2).removeClass(theClassNoDot);
  });