Question

我的PHP脚本创建了一个包含多行项目的表。每行中的Column1显示emptybox.jpg，最后一列是一个锚链接，用于选择该行上的项目：

output .= '<a href="./select_item.php id=select'.$product['id'].'"></a>';
output .= '<a href="./deselect_item.php id=deselect'.$product['id'].' style.display='"none"'"></a>';

（请注意，该样式仅包含在此帖子的内联中 - 所有样式都驻留在外部css中，我使用class =默认隐藏所有取消选择锚点）

当点击一个锚点（选择了项目）时，我希望jquery将emptybox.jpg换成checkmark.jpg，并交换锚点的“Select”锚点。理想情况下，那些应该是切换，所以反过来也可以工作（单击DeSelect将隐藏checkmark.jpg和DeSelect锚点，并将重新显示emptybox.jpg和Select锚点。）

每个行图标由标记标识，并附加productID编号。

output .='<div class="checked" id="chk'.$product['id'].'"><img="checkmark.jpg" /></div>';
output .='<div class="empty" id="mt'.$product['id'].'" .style.display="none"><img="emptybox.jpg" /></div>';

jquery代码必须标识单击了哪个“select”锚标记，以便它可以显示/隐藏相应的元素对（emptybox.jpg / checkmark.jpg，以及选择/取消选择锚点）。这是我到目前为止所做的：

<script type="text/javascript">
$(function() {
$("a").click(function(){
    $("#mt").hide();
    $("#chk").show();
    });
});

Answer 1

你可以发布几行的实际HTML吗？如果没有看到HTML结构，很难为您提供有用的jQuery。

编辑：好的。使用CSS的强大功能来简化任务。我通常做这样的事情：

添加这些CSS样式：

tr td.artchek div.empty, tr td.arthref div.a_sel
{ display: block; }
tr.selected td.artchek div.empty, tr.selected td.arthref div.a_sel
{ display: none; }
tr td.artchek div.checked, tr td.arthref div.a_desel
{ display: none; }
tr.selected td.artchek div.checked, tr.selected td.arthref div.a_desel
{ display: block; }

这个jQuery：

$('td.artchek a').click(function() {
    $(this).closest('tr').toggleClass('selected');
});

Answer 2

您可以使用以下内容：

<div class=line>
    <a href="./select_item.php" class="select"></a>
    <div class="empty"><img src="emptybox.jpg" /></div>
</div>

的javascript：

$(".line").click(function(){
    var link = $(this).find("a");
    var checkbox = $(this).find("div");

    link.toggleClass("select");
    link.toggleClass("deselect");
    if(link.hasClass("select")) { link.attr("href","./select_item.php"); }
    else { link.attr("href","./deselect_item.php"); }

    checkbox.toggleClass("empty");
    checkbox.toggleClass("checked");
    if(checkbox.hasClass("empty")) { checkbox.find("img").attr("src","emptybox.jpg"); }
    else { checkbox.find("img").attr("src","checkmark.jpg"); }
}

这会切换类和属性。这些变量并非严格必要，但它确实使代码更易于读写。

JQuery交换元素

2 个答案: