Question

由于我目前仍在学习jQuery而且我是新手，我需要一些帮助，因为我在短期限内...我试图做的是在点击图像时在两个图像之间切换它应切换到其他的，反之亦然......似乎它应该足够简单但由于某种原因它不能按预期工作......继承我的代码：

更新代码

的HTML / PHP

<div name='contractActions' style="float: right; width: 50px;">
    <input type="hidden" id="cId" value="<?= $contractId ?>" />
    <?
    if(mysql_result($result, $i,"IsHighlighted") == 0)
    {
        $imgIsHighlighted = _IMAGES . "highlighter_on.png";
        $altIsHighlighted = "Remove Highlight";
    }
    else
    {
        $imgIsHighlighted = _IMAGES . "highlighter_off.png";
        $altIsHighlighted = "Highlight";
    }
    ?>
    <span class="link-black"><a href="#" class="highlightAction">
        <img src="<?= $imgIsHighlighted ?>" border="0" alt="<?= $altIsHighlighted ?>" /></a>
    </span>
    <span class="link-black"><a href="#" class="declineAction">
        <img src="images/decline.png" border="0" alt="Decline" /></a>
    </span>
</div>

的jQuery

$(".highlightAction").click(function() {
    var element = $(this).closest("div[name='contractActions']");
    var cId = $(element).find("#cId").val();
    var field = "IsHighlighted";

    $.ajax({
        type: "POST",
        url: "ajax/contract_buttons.php",
        dataType: "text",
        data: "contractId=" + cId + "&updateField=" + field,
        async: false,
        success: function(response) {
            $(element).find("a[class='highlightAction']").children("img").toggle(function() {
                $(this).attr("src", "images/highlighter_off.png");
                $(this).attr("alt", "Remove Highlight");
            },
            function() {
                $(this).attr("src", "images/highlighter_on.png");
                $(this).attr("alt", "Highlight");
            });
        }
    });
});

之后，代码似乎无法在初始点击上工作，但它会在它们之间切换。好像切换不会激活，直到第一次点击之后，偶尔在第二次点击后。有什么理由可能会发生这种情况？如果可能，请提前解决此问题的解决方案!!

Answer 1

$(element).children("img").toggle(function() {
    $(this).attr("src", "images/highlighter_off.png");
    $(this).attr("alt", "Remove Highlight");
},
function() {
    $(this).attr("src", "images/highlighter_on.png");
    $(this).attr("alt", "Highlight");
});

切换功能。

Answer 2

由于我通过聊天进行了讨论，结果是代码似乎正确，因为它正在测试网站上工作：www.jsfiddle.net，如Jared Farrish所述。然而由于某种原因，它给了“我”个人一个问题，我们无法找到确切的原因，但看了另一种方法，因为.toggle（）函数似乎很慢......另一种方法是通过使用类，而不是在数据库中保存突出显示值，它可以使用状态来完成，这也意味着更少的命中服务器和数据库加快处理时间。无论如何希望如果有人遇到类似的问题，这会有所帮助...

jQuery切换图像

2 个答案: