Question

通过jqyuery html()函数设置html例如div的内容是否有任何缺点？

因为我在div中有静态内容，所以它是由<li>创建的进度条。现在，它显示完美，每个栏都有相互之间的间隙，只需点击一个按钮，其内容将会改变，但所有相同的代码，但现在它不像以前那样显示。它显示为一条连续线，<li>之间不再有间隙。

有什么想法吗？

代码：

<div id="branch-status-bar-container">
  <ol class="branch-status-bar" data-branch-status-bar-steps="8" >
    <li class="branch-status-bar-done" id="" > </li>
    <li class="branch-status-bar-done" id="" > </li>
    <li class="branch-status-bar-done" id="" > </li>
    <li class="branch-status-bar-done" id="" > </li>
    <li class="branch-status-bar-done" id="" > </li>
    <li class="branch-status-bar-done" id="" > </li>
    <li class="branch-status-bar-done" id="" > </li>
    <li class="branch-status-bar-done" id="" > </li>
  </ol>
</div>

CSS：

#branch-status-bar-container {
    vertical-align: middle;
    padding-bottom: 30px;
}

.branch-status-bar {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.branch-status-bar li {
    display: inline-block;
    text-align: center;
    line-height: 3em;
}

.branch-status-bar[branch-data-status-bar-steps="2"] li {
    width: 49%;
}

.branch-status-bar[branch-data-status-bar-steps="3"] li {
    width: 33%;
}

.branch-status-bar[branch-data-status-bar-steps="4"] li {
    width: 24%;
}

.branch-status-bar[branch-data-status-bar-steps="5"] li {
    width: 19%;
}

.branch-status-bar[branch-data-status-bar-steps="6"] li {
    width: 16%;
}

.branch-status-bar[branch-data-status-bar-steps="7"] li {
    width: 14%;
}

.branch-status-bar[branch-data-status-bar-steps="8"] li {
.branch-status-bar[branch-data-status-bar-steps="9"] li {
    width: 11%;
}

.branch-status-bar li.branch-status-bar-done {
    color: black;
    border-bottom: 14px solid #0489B1;
    width: 12%;
}

.branch-status-bar li:after {
    content: "\00a0\00a0";
}

JS：

$(document).ready(function () {
    $('#profit-centers').on('change', function (){
        var profit_center_id = $('#profit-centers').val();

        $.ajax({
            url: '/reporting-portal/get-profit-center',
            type: 'POST',
            data: {
                profit_center_id : profit_center_id
            }, 
            success: function (data) {
                var json = JSON.parse(data);
                var html = profit_center.branch(json);
                $('#profit-center-content').html(html);
            }, 
            error: function () {

            }  
        });
    });
});

Answer 1

.branch-status-bar li:after {
    content: "\00a0\00a0";
    line-height: 3em;
}

如果单击按钮后内容变为异常，也许你可以试试。

通过jquery html（）设置html的缺点

1 个答案: