javascript - 无法在 div block 中呈现 Bootstrap Glyphicons

Question

我写了这个脚本:

function acceptButtonClick(th) {
    var id = $(th).attr('data-id');
    $(th).parent().parent().find('div.Declined').attr('class', "Approved");

    $(th).parent().parent().find('div.Requested').attr('class', "Approved");

    $.ajax({
        type: "POST",
        url: "/TableRequest/AcceptRequest",
        data: { 'id': id },
        success: function (msg) {
        }
    });
    $(th).hide();
    $(th).parent().find('button.decline-button').show();
    $(th).parent().parent().find('span.decline-img').hide();
    $(th).parent().parent().find('span.accept-img').show();

    $(th).parent().parent().find('span.requested-img').hide();
}
function declineButtonClick(th) {

    tempId = $(th).attr('data-id');
    $('#dialog').attr('data-id', tempId);   
    $("#dialog").modal('show');
}
$(document).ready(function () {

    $('#requestTable').dataTable({
        "bServerSide": true,
        "sAjaxSource": "TableRequest/GetDataTable",
        "bProcessing": true,
        "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            $('td', nRow).find('button').attr('data-id', aData.ID);
            $('td', nRow).find('button.accept-button').click(function () {
                acceptButtonClick(this);
            });
            $('td', nRow).find('button.decline-button').click(function () {
                declineButtonClick(this);
            });
            if ($('td:eq(1)', nRow).find('div').attr('class') == "Approved") {
                $('td', nRow).find('button.accept-button').hide();
                $('td', nRow).find('span.decline-img').hide();
                $('td', nRow).find('span.requested-img').hide();
            }
            else if ($('td:eq(1)', nRow).find('div').attr('class') == "Declined") {
                $('td', nRow).find('button.decline-button').hide();
                $('td', nRow).find('span.accept-img').hide();
                $('td', nRow).find('span.requested-img').hide();
            }               
            else if ($('td:eq(1)', nRow).find('div').attr('class') == "Requested") {
                $('td', nRow).find('span.accept-img').hide();
                $('td', nRow).find('span.decline-img').hide();
            }            
        },        
        "aoColumns": [
        { "data": "ID", "visible": false, bSortable: false, bSearchable: false },
        { "data": "Name" },
        {
            "data": "VacationRequestStatus",
            bSortable: false,
            bSearchable: false,
            "mRender": function (data, type, full) {
                //return '<div class = "' + data + '"><img src="/Content/images/Accept_picture.png" class="img-rounded accept-img" height = "25px" /><img src="/Content/images/Decline_picture.png" class="img-rounded decline-img" height = "25px" /><img src="/Content/images/Requested-picture.png" class="img-rounded requested-img" height = "25px" /></div>';
                return '<div class = "' + data + '"><span class="glyphicon icon-question-sign accept-img" height = "25px" /><span class="glyphicon glyphicon-ok decline-img" height = "25px" /><span class="glyphicon glyphicon-remove requested-img" height = "25px" /></div>';
            }
        },
        { "mData": "Position", bSortable: false, bSearchable: false },
        { "mData": "DateStart", bSortable: false, bSearchable: false },
        { "mData": "DateEnd", bSortable: false, bSearchable: false },
        {
            bSortable: false,
            bSearchable: false,
            data: null,
            className: "center",
            defaultContent: '<button class="btn btn-danger decline-button">Decline</button> <button class="btn btn-primary accept-button">Accept</button>'
        }
        ]
    });
    $('button.ok-request').click(function () {
        var tempId = $('#dialog').attr('data-id');
        var message = $('textarea#commentForDecline').val();
        $.ajax({
            type: "POST",
            url: "/TableRequest/DeclineRequest",
            data: { 'message': message, 'id': tempId },
            success: function (msg) {
            }
        });

        $("#dialog").modal('hide');
        $('button[data-id="' + tempId + '"]').parent().parent().find('div.Approved').attr('class', "Declined");       
        $('button[data-id="' + tempId + '"]').parent().parent().find('div.Requested').attr('class', "Declined");       
        $('button[data-id="' + tempId + '"]').parent().parent().find('span.decline-img').show();
        $('button[data-id="' + tempId + '"]').parent().parent().find('span.accept-img').hide();
        $('button[data-id="' + tempId + '"]').parent().find('button.decline-button').hide();
        $('button[data-id="' + tempId + '"]').parent().find('button.accept-button').show();
        $('button[data-id="' + tempId + '"]').parent().parent().find('span.requested-img').hide();
        $('textarea#commentForDecline').val('');
    });
});

我只输入了 <img>第一的。此脚本适用于 <img> , 但现在我需要输入 Bootstrap Glyphicons而不是 <img> .我把<span>选择器而不是 <img> .我评论了 <img> .有人能帮我吗？我究竟做错了什么？

Answer 1

我很确定您的问号类别不正确。尝试将 glyphicon icon-question-sign 更改为 glyphicon glyphicon-question-sign

Here's a fiddle用“测试”代替您的 data 变量。呈现所有图标。