我无法有选择地在元素上运行我的函数-前端黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

黑洞官方问答小能手

486941

文章

248116898

访问

+关注

分类

暂无分类

日期归档

暂无数据

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

发布于2023-11-18 07:47 阅读(562) 评论(0) 点赞(4) 收藏(0)

这是我上一个问题的后续问题。

我有两组按钮，并且我正在使用一个 jQuery 函数，该函数在单击这些按钮时bgAddRemoveClass添加和删除这些按钮中的类。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');
});

解决方案

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

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