如何将 Class 和文本替换为按钮

Question

试图替换 Class 和文本到按钮，有三个列表项，列表 1 和 2 相同 class，列表 3 不同 class 已经动态添加.有两个按钮，如 <button class="one"></button> 和 <button class="two"></button>。
现在想放置 class 和文本，就像在按钮内放置任何 class 和列表中的文本一样，像：下面给出的 <button class="one text1">text1</button> 和 <button class="two text2">text2</button> HTML。

请看这个example image>（我希望）

HTML: Fiddle here

<div id="main-id">

<button class="one"></button>  
    <button class="two"></button>  

<ul>

<li class="text1"> <!--List 1-->
<div class="label">
<a href="http://lorem.com">text1</a>
</div>
</li>

<li class="text1"> <!--List 2 is Same-->
<div class="label">
<a href="http://lorem.com">text1</a>
</div>
</li>

<li class="text2"> <!--List 3 is different-->
<div class="label">
<a href="http://lorem.com">text2</a>
</div>
</li>

</ul>
</div>

我试过这个 'Replacetext' script，但我做不到。对其他方法有什么建议吗？ 我的问题是： 想要从列表项中动态替换每个按钮的文本和 class。不需要 link 或没有点击功能。输出应该是这样的：<button class="one text1">text1</button>动态，它应该执行automatically/on加载。请看给定的图像。 jQuery/javascript 尽可能。
提前致谢。

Answer 1

尝试以下方法

如果你想在页面加载时使用它

$('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);
});

jsFiddle: https://jsfiddle.net/taleebanwar/7ts8Lcpa/23/

要在单击列表时执行此操作，以下代码应该可以解决问题。（我离开了这部分，以便评论部分有意义）

$('li').click(function () {
    var ind = 0;
    var cl = $(this).attr('class');
    var txt = $(this).find('a').text();
    var clses = [];

    $('li').each(function () {

        if (clses.indexOf($(this).attr('class')) == -1) {
            clses.push($(this).attr('class'));
            ind = ind + 1;

        }

        if ($(this).attr('class') === cl) {
            return false; // break 
        }

    });

    $('button:nth-child(' + ind + ')').addClass(cl);
    $('button:nth-child(' + ind + ')').text(txt);
    return false;
});

jsFiddle: http://jsfiddle.net/taleebanwar/5mbnfdf8/1/

Answer 2

$('button').click(function(e){
var class = $(this).attr('class')
if (class == 'one'){
$(this).addClass('text1')
$(this).innerHtml($('.text1 a').innerHtml)
}else{
$(this).addClass('text2')
$(this).innerHtml($('.text1 a').innerHtml)
}

}

或：

$('button').click(function(e){
var key=$(this).attr('key')
$('li').each(function(e)({
if (key == value){
var result=$(this).attr('class')
var text = $(this).innerhtml()
}
$(this).addclass(result)
$(this).innerhtml(text)
}
}

html代码：

<div id="main-id">

<button class="one" key='1'></button>  
    <button class="two" key='2'></button>  

<ul>

<li class="text1" value='1'> <!--List 1-->
<div class="label">
<a href="http://lorem.com">text1</a>
</div>
</li>

<li class="text1" value='1'> <!--List 2 is Same-->
<div class="label">
<a href="http://lorem.com">text1</a>
</div>
</li>

<li class="text2" value='2'> <!--List 3 is different-->
<div class="label">
<a href="http://lorem.com">text2</a>
</div>
</li>

</ul>
</div>

Answer 3

你也可以试试这个：

    <div id="main-id">

<button class="one"></button>  
    <button class="two"></button>  

<ul>

<li class="text1"> <!--List 1-->
<div class="label">
<a href="#">text1</a>
</div>
</li>

<li class="text1"> <!--List 2 is Same-->
<div class="label">
<a href="#">text1</a>
</div>
</li>

<li class="text2"> <!--List 3 is different-->
<div class="label">
<a href="#">text2</a>
</div>
</li>

</ul>
</div>

JS:

$('.text1').click(function(){
   var btn_one = document.getElementsByTagName('button')[0],
    this_class = $(this).attr('class'),
    this_text = $(this).text();
   $(btn_one).attr('class',this_class);
   $(btn_one).html(this_text);
});

$('.text2').click(function(){
   var btn_two = document.getElementsByTagName('button')[1],
    this_class = $(this).attr('class'),
    this_text = $(this).text();
   $(btn_two).attr('class',this_class);
   $(btn_two).html(this_text);
});

https://jsfiddle.net/Grald/16qcakpv/

Answer 4

基于聊天。你要的是这个：

$( document ).ready(function() {
    $('.one').addClass( $('.text1').attr('class') ).text( $('.text1').find('.label a').html() ).removeClass('one');
    $('.two').addClass( $('.text2').attr('class') ).text( $('.text2').find('.label a').html() ).removeClass('two');
});

https://jsfiddle.net/bobrosset/7abue6vm/10/

我还不明白原因，希望对你有所帮助。

如何将 Class 和文本替换为按钮

How to replace Class and text to Button

html

javascript

jquery

replace

addclass

}