在视图中使用 JQuery 设置 img src - mvc 5

Question

在我的视图中显示图像

<img src="~/Content/img/icon@(item.levelList.rank.Trim()).png" alt="@item.levelList.rank.Trim()" height="40" width="45">

我还有两个 span，一个最初显示（上图），另一个隐藏（编辑功能）。

当点击 Edit 时，span 切换可见性，上面的 img 被隐藏，并出现一个下拉列表，而不是其他图像值。

当我点击保存时，下拉列表被重新隐藏，img 被重新显示，然后下拉列表的值被应用到 img 的跨度 - 但它是文本形式而不是图像形式。

我的问题在于以下代码将下拉列表值设置为 img 跨度值。

$(element).closest("td").prev("td").find("span.item-display")
.html($(element).closest("td").prev("td").find("span.item-field").find("option:selected").text().trim());

我一直使用它来更新文本输入值，而不是图像源值，所以我不确定如何将 ^ 转换为可以更新 img src 的东西。

这是视图 sn-p 显示隐藏和显示的两个跨度。

<td class="col-xs-2" style="vertical-align:middle">
     <span class="item-display">
           <span style="font-size: 17px">
                <img src="~/Content/img/icon@(item.levelList.rank.Trim()).png" alt="@item.levelList.rank.Trim()" height="40" width="45">
            </span>
      </span>
      <span class="item-field">
            @Html.DropDownList("elo", null, "Choose...", new { @id = "userElo", @class = "col-xs-10", @Style = "padding-left:0px" })         
      </span>
</td>

所以我正在寻找一种方法来通过 JQuery 使用所选的下拉列表值更新我的 img src 标签。

您可以在此处查看实时站点查看结果：MySite 如果您单击“编辑”然后更改 ELO 等级并单击“保存”，您将看到文本取代它，而不是图像。 （也没有实际保存，所以不用担心编辑错误）

Answer 1

短暂访问了您的网站，但没有深入研究。我认为您希望选择框上的 jquery 更改事件。

编辑：仔细查看上面的 HTML，发现图像上没有任何 ID 或类。您需要它来引用选择更改事件上的图像源更改

<img id="GiveMeAnID" src="~/Content/img/icon@(item.levelList.rank.Trim()).png" alt="@item.levelList.rank.Trim()" height="40" width="45">

例如，您的页面上有此选择框的位置

<select style="padding-left:0px" class="col-xs-10" id="userElo" name="elo"><option value="">Choose...</option>
<option value="1">Unranked       </option>
<option value="2">Bronze         </option>
<option value="3">Silver         </option>
<option value="4">Gold           </option>
<option value="5">Platinum       </option>
<option value="6">Diamond        </option>
<option value="7">Challenger     </option>
</select>

您可以为选择元素的更改事件添加代码，如下所示以更改图像源。

$( "#userElo" ).change(function() {
    $("#yourimageID").attr("src","/yourpath/yourimage.jpg");
});