Question

我有一个目前显示排行榜和图片的网页。图片是目前在排行榜上排名第一的人的图像。这个html如下：

<div id="leaderboardDiv">
<h1>Leaderboard</h1>
<table id="leaderboard">
    <tr><th></th><th>Owner</th><th>Points</th></tr>
            <tr><td>1</td><td>Barry</td><td>166</td></tr>
            <tr><td>2</td><td>Tom</td><td>161</td></tr>
            <tr><td>3</td><td>Laura</td><td>159</td></tr>
            <tr><td>4</td><td>Shane</td><td>153</td></tr>
</table>

        <div id="pictureDiv">
            <img src="/Content/Images/Barry.jpg" style="width:150px;height:200px" />
        </div>      
</div>

现在我想创建一个javascript函数，以便当排行榜上的第一个位置发生变化时，图像会动态变化。 Images文件夹包含排行榜上每个人的jpg，文件名与其排行榜名称完全匹配。

是否可能在jQuery或javascript中编写一些可能会动态改变img标记的src以使其匹配表中第一位的人？第一个位置可以通过作为表格第一行第二列的内容来识别。

Answer 1

从排行榜获取第一个人的姓名：

var winnerName=$("#leaderboard tr td:eq(1)").text();

现在更改图像标签SRC属性：

$("#pictureDiv img").attr("src", "/Content/Images/"+winnerName+".jpg");

Answer 2

jquery中有attr()函数：

var firstPlaceGuy = $("table#leaderboard tr").first();

//get the data-img-src attribute (form the below html code)
var imageSRC = $(firstPlaceGuy).data("imgSrc");

//set the "src" attribute in the <img> tag
$("#pictureDic img").attr("img", imageSRC);

另外，将一些信息添加到第一个人的html标签：

<tr data-img-src="derp.png"> ... </tr>

如何根据表中的当前值动态更改图像源

2 个答案: