我无法有选择地在元素上运行函数

Question

这是我的previous question的后续报道。

我有两组按钮，并且正在使用名为bgAddRemoveClass的jQuery函数来在单击这些按钮时添加和删除类active-button。

问题是两组按钮同时更改，但我只需要更改button-set-1或button-set-2。并非两者都在同一时间。

这是我的破损代码：

/* Add and remove a 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 for button-set-1 */
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;
}

.button-set-2 {
  margin-top: 10px;
}

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

<div class="button-set-1">
  <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>

<div class="button-set-2">
  <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>

我也尝试像这样仅定位button-set-1，但是它完全破坏了功能：

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

Answer 1

将单击元素的父级存储在变量中，然后在选择中使用它。

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

  jQuery(elem1).click(function() {
    var parent = jQuery(this).parent();
    
    jQuery(elem1, parent).addClass(theClassNoDot);
    jQuery(elem2, parent).removeClass(theClassNoDot);
  });
  jQuery(elem2).click(function() {
    var parent = jQuery(this).parent();
    
    jQuery(elem2, parent).addClass(theClassNoDot);
    jQuery(elem1, parent).removeClass(theClassNoDot);
  });

}

/* Invoke the function for button-set-1 */
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;
}

.button-set-2 {
  margin-top: 10px;
}

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

<div class="button-set-1">
  <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>

<div class="button-set-2">
  <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>