創建動態類名時，如何在JavaScript字符串中添加空格？

Question

我在ASP.NET MVC中使用Javascript。 我需要動態地創建包含空格的類名，但是它不起作用。

結果變成

<script class="carousel-item" active="">

而不是

<script class="carousel-item active">

下面是代碼塊。

@for (var i = 0; i < Model.Banners.Count; i++)
{
                    var className = "carousel-item";
                    if (i == 0)
                    {
                        className += " active";
                    }

                    var srcName = "";
                    if (Model.Banners[i].Image != null)
                    {
                        srcName = "data:image;base64," + @System.Convert.ToBase64String(Model.Banners[i].Image);
                    }

                    <div class=@className>
                        <img class="d-block img-fluid" src=@srcName/>
                    </div>
}

Answer 1

您在<div class=@className> @className周圍缺少引號，請嘗試使用<div class="@className"> 。

您還應該在img標簽中在@srcName周圍添加引號

<div class="@className">
    <img class="d-block img-fluid" src="@srcName"/>
</div>

說明

沒有引號<div class="@className">將呈現

<div class=carousel-item active>

哪個被解釋為

<div class="carousel-item" active="">

Answer 2

實際上，您缺少html屬性的雙引號（“”），正確的html語法為attr1 =“ value1，value2”，並且將其設置為attr1 = value1 value2。

嘗試：

<div class="@className">
    <img class="d-block img-fluid" src="@srcName"/>
</div>

要么：

var className = "\"carousel-item";
if (i == 0)
{
    className += " active";
}
className += "\"";