添加和删除类以单击动态按钮
Add and Remove class to click a dynamic Button
尝试添加和删除类以单击动态按钮,意味着此按钮<button class="one"></button>
动态地获得类:<button class="one text1">text1</button>
因此,如果按钮1 有.text1
类,并通过单击这将.hide
类添加到列表项目<li class="text1">
中,如<li class="text1 show">
相同的按钮2 <button class="two"></button>
和点击添加类<li class="text2 show">
注意:当点击按钮二时,则应删除类.show
,并在按钮一上添加新的类.hide
。
主要HTML:
<div id="main-id">
<button class="one"></button>
<button class="two"></button>
<ul>
<li>
<!--List 1-->
<div class="label">
<a href="#">text1</a>
</div>
</li>
<li>
<!--List 2 is Same-->
<div class="label">
<a href="#">text1</a>
</div>
</li>
<li>
<!--List 3 is different-->
<div class="label">
<a href="#">text2</a>
</div>
</li>
</ul>
</div>
脚本:
$('.label a').each(function() {
var $this=$(this);
$this.closest('li').addClass($this.text());
});
// Combine This
$('button').each(function(){
var liInd = 0;
var cl = '';
var txt = '';
var clses = [];
var ind = $('button').index($(this)) + 1;
$('li').each(function(){
if(clses.indexOf($(this).attr('class')) === -1){
clses.push($(this).attr('class'));
liInd = liInd + 1;
}
if(ind === liInd){
cl = $(this).attr('class');
txt = $(this).find('a').text();
return false; //break
}
});
$('button:nth-child(' + ind + ')').addClass(cl);
$('button:nth-child(' + ind + ')').text(txt);
});
参见小提琴
示例我已经尝试过通过点击功能添加/删除类,但问题是按钮从列表项动态获取类,所以我无法目标按钮。
有任何建议的其他方式做到这一点,通过JS/Jquery?
这是另一个解决方案
$('button').each(function () {
var liInd = 0;
var cl = '';
var txt = '';
var clses = [];
var ind = $('button').index($(this)) + 1;
$('li').each(function () {
if (clses.indexOf($(this).attr('class')) === -1) {
clses.push($(this).attr('class'));
liInd = liInd + 1;
}
if (ind === liInd) {
cl = $(this).attr('class');
txt = $(this).find('a').text();
return false; //break
}
});
if (txt != '') {
$('button:nth-child(' + ind + ')').addClass(cl);
$('button:nth-child(' + ind + ')').text(txt);
}
});
$('button').click(function () {
if ($(this).attr('class')[0] == 'all') {
showAll();
return false; // end this function
}
var allCls = $(this).attr('class').split(' ');
$('li').each(function () {
if (allCls.indexOf($(this).find('a').text()) > -1) {
$(this).closest('li').removeClass('show').addClass('hide');
} else {
$(this).closest('li').removeClass('hide').addClass('show');
}
});
});
function showAll() {
$('li').removeClass('hide').addClass('show');
}
小提琴:https://jsfiddle.net/taleebanwar/yaLm4euk/13/
DEMO
$('.label a').each(function () {
var $this = $(this);
$this.closest('li').addClass($this.text());
});
// Combine This
$('button').each(function () {
var liInd = 0;
var cl = '';
var txt = '';
var clses = [];
var ind = $('button').index($(this)) + 1;
$('li').each(function () {
if (clses.indexOf($(this).attr('class')) === -1) {
clses.push($(this).attr('class'));
liInd = liInd + 1;
}
if (ind === liInd) {
cl = $(this).attr('class');
txt = $(this).find('a').text();
return false; //break
}
});
$('button:nth-child(' + ind + ')').addClass(cl);
$('button:nth-child(' + ind + ')').text(txt);
});
$(document).on('click', 'button',function(e){
var textClass = $.grep(this.className.split(" "), function(v, i){
return v.indexOf('text') === 0;
}).join();
console.log(textClass);
$('li').removeClass('show').addClass('hide')
$('li').each(function(){
if($(this).hasClass($.trim(textClass))){
$(this).removeClass('hide').addClass('show');
} else {
$(this).removeClass('show').addClass('hide');
}
})
})
.show{display:list-item;}
.hide{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="main-id">
<button class="one"></button>
<button class="two"></button>
<ul>
<li>
<!--List 1-->
<div class="label">
<a href="#">text1</a>
</div>
</li>
<li>
<!--List 2 is Same-->
<div class="label">
<a href="#">text1</a>
</div>
</li>
<li>
<!--List 3 is different-->
<div class="label">
<a href="#">text2</a>
</div>
</li>
</ul>
</div>
相关文章:
- 通过单击动态加载的表中同一行的另一个字段来更新一行的字段
- 单击动态添加的按钮时如何触发 aspx 脚本
- 如何在使用鼠标单击动态绘制多边形时在画布中拖放多边形
- 单击动态按钮时获取ImageData
- 单击动态创建的编辑按钮不起作用
- 根据提交单击动态调整 iFrame 的高度
- 单击动态创建的 DOM
- jQuery 单击动态元素
- 单击动态更改元素上的按钮
- 如果两者具有相同的 id,如何使用 jquery 单击动态按钮来删除动态跨度
- 超时时单击动态标签时出现问题
- 单击动态/移动锚点的事件侦听器
- 单击动态添加表中的事件
- 单击动态添加图像上的事件
- 单击动态生成的图像时触发事件
- 单击动态创建的文本区域上的Listner
- 单击动态创建的选择,使用Javascript/jQuery选择其他动态内容
- 单击动态生成的复选框列表,选中2个复选框
- 添加和删除类以单击动态按钮
- 在单击动态创建的元素coffeescript时绑定Class方法