发布于2023-11-18 07:47 阅读(716) 评论(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>
作者:黑洞官方问答小能手
链接:http://www.qianduanheidong.com/blog/article/532557/29920e74647ea46d1cb6/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!