程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

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


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

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

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


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

我有两组按钮,并且我正在使用一个 jQuery 函数,该函数在单击这些按钮时bgAddRemoveClass添加和删除这些按钮中的类。active-button

问题是两组按钮同时更改,但我只需要更改button-set-1button-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>




所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/532557/29920e74647ea46d1cb6/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

4 0
收藏该文
已收藏

评论内容:(最多支持255个字符)