我无法调用我的jQuery函数 [英] I cannot call my jQuery function

问题描述

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

I created a jQuery function that adds and removes a class when clicking on a button.

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

The grey background will change depending on which button you click because I am adding and removing the active-button class each time.

/* 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类不会更改.

Then I realised I needed similar functionality for some other buttons, so I decided to turn it into a reusable function that I could call when needed. But when I do that the function stops working, the active-button class does not change.

这是我(破碎的)尝试将其分离为自己的可重用功能.

Here is my (broken) attempt at separating it out into it's own reusable function.

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

我在做什么错了?

推荐答案

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

Remove quotes, you need variables not strings

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

这篇关于我无法调用我的jQuery函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！