如何使用动态生成的列表中的按钮更改文本？

Question

我使用play框架2.3.8，我试图更改按钮旁边的某个文本值。该按钮通过生成的列表动态添加，因此我无法找到按钮旁边的正确文本。

这就是它的样子：

我的视图类获得了一个问题列表questionList: List[Question]，我在其中迭代并将一堆按钮放入我的html中：

@for(question <- questionList){
<!-- Questions -->
<li class="list-group-item" >
<button type="button" class="btn btn-default"  id="upvoteButton" 
value="voteUp" style="width: 30px; height: 30px; text-align: center; vertical-align: center;">
<span class="glyphicon glyphicon-arrow-up" aria-hidden="true" style="color:orange"></span>
</button>

<span class="num"> @question.voteScore </span>

(...)

在课程中，“num”是我想要在按钮点击时更改的问题的实际投票分数。 id-tag没有帮助，因为按钮生成，因此所有都具有相同的id-tag（旁注：只有第一个ID实际工作，我想第一个按钮获得唯一ID？）。

到目前为止我的方法：

如果我点击num本身，我可以更改它的值：

$(document).ready(function(){
            $(document).on('click', '.num', function(){
                $(this).html(111);
                });
        });

但尝试通过单击按钮完成此操作失败：

$(document).ready(function(){
    $(".btn-default").click(function(){
        $(this).slideUp().slideDown();
        console.log($('.num').html());
    });
});

无论我点击哪个按钮，console.log的输出始终为76。我找不到链接到正确数字的按钮。我该如何做到这一点？

Answer 1

试试这个： -

$(".btn-default").click(function(){
    $(this).slideUp().slideDown();
    $(this).next('.num').html('111');
});

或者您也可以尝试： -

 $(".btn-default").click(function(){
    $(this).slideUp().slideDown();
    $(this).parent('li').find('.num').html('111');
});

Answer 2

我认为当你正在进行document.ready init调用时，你的按钮不是“可见的”所以我建议以这种方式添加它，以便在dinamic call结束后生效或绑定dom。

$(document).ready(function(){
    $('body').on( 'click', '.btn-default' , function(){
        $(this).slideUp().slideDown();
        console.log($('.num').html());
    });
});

hth，k