1

我希望用户单击此表中的图像，该图像是根据从 Web 服务发送的 JSON 数据动态创建的，并更改图像。再次单击图像时，它将变回第一个图像（仅在两个图像之间交换）。

我有一个通过 jQuery 的$.ajax()函数创建的表，如下所示：

<table border="0" width=80% id="table">
            <thead>
            <tr>
                  <td><h3>Check to Renew</h3></td>
                  <td width=40%><h3>Vendor Part</h3></td>
                  <td width=100%><h3>Part Description</h3></td>
                  <td><h3>Unit Price</h3></td>
                  <td><h3>Quantity</h3></td>
            </tr>
            </thead>
            <tbody>
                <tr class="template">
                  <td><img src="images/checkmark.png" alt="check" id="row1" onclick=""></td>
                  <td>$vendorPart</td>
                  <td>$partDescription</td>
                  <td>$price</td>
                  <td><input class="quantityClass" name="quantity" value="$quantity"/></td>
                </tr>
            </tbody>
        </table>

这是更改图像的简单 Javascript 函数：

renewimg=Array("images/checkmark.png","images/gray_x.png");
function rowImageRefresh(y)
{
    document.getElementById(y).src=renewimg[++m];
    if (m==1)
    {m=-1;}
}

这个 Javascript 函数工作得很好，但是只有当我将图像 id 传递给它时（在这种情况下特定于行）。用于测试目的的硬编码证明了这一点。我的问题是我希望能够在创建表行时动态创建行 ID，然后具有可以传递该 ID 的功能。

我想如果我要更多地说明这一点，它会看起来像这样：

JavaScript: var row = 1;

HTML:
//table data

<td><img src="images/checkmark.png" alt="check" id="row+[i];i++;" onclick="rowImageRefresh(this.row.id)"></td>
//more table data

在创建每一行时动态创建 id 并且 onclick 函数传递单击的图像的行。

4

4 回答 4

1

您可以使用 id="x" 设置单个行 ID。或者，您可以只使用 jQuery 从发生单击事件的位置查找索引并获取该部分的索引。

$('img.check').click(function(){
   var id = $(this).index();
   rowImageRefresh();
});
于 2013-04-25T18:03:44.877 回答
1

考虑使用自定义数据属性，而不是尝试生成唯一 ID。

<img src="..." data-partid="$vendorPart" class="part-img" />

$(".part-img").on("click", function() {
    var id = $(this).data("partid");
    // or
    var id = $(this).attr("data-partid").val();

    rowImageRefresh(id);
});

编辑： 似乎您正在尝试切换复选框图像。更好的方法可能是使用 css 和 sprite 更改背景图像。然后点击你交换class依赖的状态。

于 2013-04-25T18:34:46.493 回答
1

这是您可以根据行索引为每个图像分配 id 的一种方法：

$.each(rows, function(index, row) {
    var data = $.extend({}, row, { id: "row" + index });
    var $row = $(template(data));
    $row.removeClass('template');
    var $img = $('img', $row);
    $img.on('click', function() {
        var $this = $(this);
        if ($this.data('checked') === true) {
            var checked   = $this.attr('src');
            var unchecked = $this.data('src');
            $this.attr('src', unchecked);
            $this.data('src', checked);
            $this.data('checked', false);
        } else {
            var unchecked = $this.attr('src');
            var checked   = $this.data('src');
            $this.attr('src', checked);
            $this.data('src', unchecked);
            $this.data('checked', true);
        }
    });

    $tbody.append($row);
});

图像的 HTML 如下所示：

<img src="checked.png" alt="check" data-checked="true" data-src="unchecked.png" id="${ id }" />

这是一个工作示例：http: //jsfiddle.net/potatosalad/MJYpA/1/

我使用lodash.js作为模板，但是无论你做什么来生成 HTML 行都应该是一样的。

于 2013-04-25T18:43:44.387 回答
1

您实际上根本不需要 id。例如：

<img src="images/checkmark.png" alt="check" onclick="toggle(this)">

然后脚本：

function toggle(element)
{
    var sources = ["images/checkmark.png", "images/gray_x.png"],
        current = $(element).data('state') || 0;

    current = 1 - current;

    $(element).data('state', current);
    element.src = sources[current];
}

它在两种状态之间切换，使用 记住当前状态.data()。

于 2013-04-25T18:46:08.200 回答