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);
  });

Answer 2

删除elem1函数内elem2，theClassNoDot和bgAddRemoveClass()周围的引号。通过添加引号，您没有使用传递到函数中的值，而是将'elem1'和'elem2'作为值传递给jQuery。

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

我的意思是您在添加/删除类函数中传递了错误的参数，请使用内部参数的名称而不是使用类名称。尝试以这种方式调用函数：

bgAddRemoveClass(elem1, elem2, 'someClass');

然后：

jQuery(elem1).addClass(someClass);
jQuery(elem2).removeClass(someClass);

我无法调用我的jQuery函数

3 个答案: