Question

尝试将Class和Text替换为Buttons，有三个列表项，list 1和2是同一个类，list 3有不同的类，alrady动态添加。有两个按钮，例如<button class="one"></button>和<button class="two"></button>。
现在想要放置类和文本，比如将任何类和文本放在按钮内的列表中，例如：<button class="one text1">text1</button>和<button class="two text2">text2</button> HTML，如下所示。

请参阅此example image＆gt; （我希望）

HTML：小提琴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>

我试过这个＆＃39;替换文字＆＃39; script，但我无法做到这一点。有关其他方式的建议吗？ 我的问题agin：想要从列表项中动态获取每个按钮的文本和类。不需要链接或没有点击功能。输出应该是这样的：<button class="one text1">text1</button>动态，它应该自动/在加载时执行。请看给定的图像。 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/

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

如何将类和文本替换为Button

4 个答案:

}