尝试添加和删除类以单击动态按钮,意味着此按钮 <button class="one"></button>
像这样动态获取类:<button class="one text1">text1</button>
因此,如果按钮一个具有类 .text1
并通过单击此添加类 .hide
列出项目 <li class="text1">
喜欢 <li class="text1 show">
与按钮二相同<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');
}
关于javascript - 添加和删除类以单击动态按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32163672/