Javascript 如何将类和文本替换为按钮

尝试将类和文本替换为按钮时，有三个列表项，列表1和2是同一个类，列表3是动态添加的不同类。有两个按钮，如

和

。
现在要放置类和文本，就像将列表中的任何类和文本放置在按钮内一样， 例如：

text1

和

text2

HTML，如下所示

请看这个>（我希望如此）

HTML:Fiddle

我尝试过这个“替换文本”，但我无法做到这一点。有没有其他方法的建议？ 我的问题是：要将文本和类替换为从列表项动态获取的每个按钮。不需要链接或没有点击功能。输出应该是这样的：

text1

动态地，它应该自动执行/加载。请看给定的图片。尽可能使用jQuery/javascript。
提前感谢。

请尝试以下方法

如果你想在页面加载

$('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：

---

要在单击列表时执行此操作，下面的代码应该执行此操作。（我留下了这一部分，以便评论部分有意义）

jsiddle:

尝试以下方法

如果你想在页面加载

$('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：

---

要在单击列表时执行此操作，下面的代码应该执行此操作。（我留下了这一部分，以便评论部分有意义）

jsFiddle：

} 或：

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>

} 或：

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>

您也可以尝试以下方法：

    <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>

---

您也可以尝试以下方法：

    <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>

---

基于聊天记录。你想要的是：

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

---

我还不明白原因，但希望能有所帮助。

基于聊天。你想要的是：

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

---

---

我还不明白原因，但希望能有所帮助。

嘿，伙计，你能说得更具体一点吗。我看过你的帖子很多次了，但还是不明白。是否要动态替换每个按钮的文本？或列表中的文本。还有一件事，replaceText脚本是一个自定义脚本。您使用的是jQuery还是纯javascript？是的，希望动态替换每个按钮的文本和类。Kay，给我几分钟时间重新做这件事。我将添加一些ID以便于识别。将按钮链接到列表项的想法是什么？那些修好了吗？或者这将是动态的？没有链接或没有点击功能。输出应如下所示：

text1

动态。它应该自动执行/加载。嘿，伙计，你能更具体一点吗。我看过你的帖子很多次了，但还是不明白。是否要动态替换每个按钮的文本？或列表中的文本。还有一件事，replaceText脚本是一个自定义脚本。您使用的是jQuery还是纯javascript？是的，希望动态替换每个按钮的文本和类。Kay，给我几分钟时间重新做这件事。我将添加一些ID以便于识别。将按钮链接到列表项的想法是什么？那些修好了吗？或者这将是动态的？没有链接或没有点击功能。输出应如下所示：

text1

动态。它应该自动执行/加载。谢谢，但为什么要单击功能？此外，它也不起作用，请参见此处：-我正在尝试从列表项动态地向按钮添加类和文本。我以为您正在尝试在单击列表时实现这一点。您希望文本和类何时复制到按钮？你想在页面加载时使用它吗？谢谢，亲爱的，但我想自动/加载替换它，请建议。好的，当然，我正在等待。让我们一起来。谢谢，但为什么要单击函数？此外，它也不起作用，请参见此处：-我正在尝试从列表项动态地向按钮添加类和文本。我以为您正在尝试在单击列表时实现这一点。您希望文本和类何时复制到按钮？你想在页面上加载这个吗？谢谢亲爱的，但我想自动/加载替换它，请建议。好的，当然，我在等待。让我们。嗨，谢谢，但不需要链接或无点击功能。输出应该是这样的：

text1

动态，它应该自动执行/加载。您好，谢谢，但不需要链接或无点击功能。输出应该是这样的：

text1

动态地，它应该自动执行/加载。您好，谢谢，但是没有点击功能怎么做？除了点击之外，您还想使用什么触发器？如果您想让它加载事件，只需删除点击功能方法。您好，谢谢，但是没有点击功能怎么做呢？除了点击之外，你还想使用什么触发器呢？如果你想在加载事件时使用点击功能，只需删除点击功能方法。谢谢，我将以新的方式问同样的问题，我会给你链接，请稍候。嗨，你在吗？这是我要问你的问题：对不起，伙计，昨天你给我发新链接时真的很晚了，但是我看到你的问题已经有答案了，很高兴看到这个谢谢，我将以新的方式问同样的问题，我会给你链接，请稍候。嗨，你在吗？这是我要问你的问题：对不起，伙计，昨天你给我发新链接时真的很晚了，但是我看到你的问题已经有答案了，很高兴看到这个D

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