Question

我在点击.tb-delete-team a时尝试获取tb-team-name的值，但出于某种原因，它会呈现为

＆＃34;您确定要删除[object Object]吗？＆＃34;

当我这样做时

$('.hutdb-modal-body').html(nameOutput);

它显示了应该做的链接。我究竟做错了什么？（我不是很擅长jQuery）

HTML

 <tr role="row" class="odd">
    <td width="80%;" class="row-label tb-team-name bold"><a href="/17/builder/12037">Goon Squad</a></td>
    <td class="tb-synergy">3</td>
    <td class="tb-team-overall">86.05</td>
    <td class="tb-delete-team"><a class="table-button" href="/s/builder/del/12037"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></td>
 </tr>

的jQuery

$('.tb-delete-team a').click(function(event) {
    event.preventDefault();
    var addressValue = $(this).attr('href');
    var nameValue    = $(this).parent('#my_teams_wrapper table tbody tr td').parent('#my_teams_wrapper table tbody tr').children('.tb-team-name').children('a');
    var nameOutput   = nameValue.clone().val('.tb-team-name');

    $(this).each(function () {
        $('.hutdb-overlay').show();
        $('.hutdb-modal').fadeIn();

        $('.hutdb-modal-body').html('Are you sure you want to delete ' + nameOutput + '?');

        $('.hutdb-modal-button-group').html( '<a class="cancel" href="#">Cancel</a><a class="confirm" href="'+addressValue+'"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a>' );
        $('.hutdb-modal-button-group .cancel').click(function() {
            $('.hutdb-modal').hide();
            $('.hutdb-overlay').hide();
        });
    });
});

Answer 1

该行

var nameOutput = nameValue.clone().val('.tb-team-name');

应该是

var nameOutput = nameValue.clone().val();

虽然我很好奇为什么要克隆最初的元素。总的来说，当你明智地使用ID或类会使这个繁琐的4行任务时，我认为你正在努力遍历DOM。

Answer 2

尝试在下面使用nameValue：

var nameValue = $(this).closest('tr').find('.tb-team-name').text();

closest匹配并返回DOM中的第一个父选择器。见documentation

上面的代码首先在DOM中遍历，直到它遇到第一个tr（其父级），然后遍历到匹配的tr并找到.tb-team-name并检索其值（或<a>标签的文字。

之后您可能不需要nameOutput。

克隆HTML并使用自定义文本进行渲染

2 个答案: