1

我不太确定如何表达这个..但这里是:)

我有类似的链接:

<a href='#' class='tip' id='4a' onclick=\"load('go.php?go=4a');\"><img src='go.png'></a>
<a href='#' class='tip' id='6a' onclick=\"load('go.php?go=6a');\"><img src='go.png'></a>
<a href='#' class='tip' id='8a' onclick=\"load('go.php?go=8a');\"><img src='go.png'></a>

当有人点击我想go.php?go=4a在后台运行的第一个链接时,将链接上的图标更改为stop.png,同时将此链接的 URL 更改为go.php?stop=4a

如果他们认为单击相同的链接,我想将这一切恢复到原来的样子。有效地使每个链接都成为去/停止切换!

我似乎认为 jquery 可以做到这一点,但我找不到任何例子。

有人有什么想法吗?

谢谢 :)

4

2 回答 2

1

如果您已加载 jQuery,并且您有一个x用作页面内容的容器,则可以使用$.ajax将动态内容加载到容器并使其加载/停止,例如:

$(function () {
    $('a.tip').on(' click', function () {
        var $this = $(this),
            container = $('#x'),
            prevHTML = container.html(),
            req = {};
        if ($this.hasClass('go')) {
            req.abort();
            container.html(prevHTML);
            $this.find('img').attr('src', 'go.png');
            $this.removeClass('go');
        } else {
            $this.find('img').attr('src', 'stop.png')
                .end().addClass('go');
            req = $.ajax({
                url: 'go.php?go=' + $this.attr('id'),
                type: 'get',
                success: function (data) {
                    container.html(data);
                    $this.removeClass('go');
                }
            });
        }
    });
});

ps 这是一个让您入门的粗略示例。干杯!

于 2013-01-28T09:17:43.273 回答
0

据我所知 - 你想要什么是不可能的。更改 URL 会刷新页面,因此您的 ajax 将在关键时刻丢失。

不过,您可以使用锚点(例如,如果您在go.php,您可以将 url 更改为go.php#go4a,并且通过正确的编码,您将能够使页面像运行 AJAX 一样工作。

关于还原,您需要使用标志来查看其状态,然后进行适当的还原。不知道你需要什么,所以这是我能给你的所有信息。

于 2013-01-28T09:14:30.033 回答