Question

我有一个有“订阅”和“取消订阅”按钮的论坛。当你点击它一次，它会改变，但在页面刷新之前不会再切换回来。

这是我的代码：

$(document).ready(function () {

// Subscribe to topic subscribedtotopic
$(".notsubscribedtotopic").click(function () {
    var topicid = $(this).attr('rel');
    $(this).slideUp('fast');
    $(this).html('Unsubscribe From Topic');
    $(this).removeClass('notsubscribedtotopic').addClass('subscribedtotopic');
    $(this).slideDown();
    $.get("/base/Solution/SubScribeToTopic/" + topicid + ".aspx",
    function (data) {
        var result = $('value', data).text();
    });
    return false;
});

// UnSubscribe to topic subscribedtotopic
$(".subscribedtotopic").click(function () {
    var topicid = $(this).attr('rel');
    $(this).slideUp('fast');
    $(this).html('Subscribe To Topic');
    $(this).removeClass('subscribedtotopic').addClass('notsubscribedtotopic');
    $(this).slideDown();
    $.get("/base/Solution/UnSubScribeToTopic/" + topicid + ".aspx",
    function (data) {
        var result = $('value', data).text();
    });
    return false;
    });
});

Answer 1

它不起作用，因为当你添加事件处理程序时类没有，所以它找不到元素。

$(".notsubscribedtotopic")和$(".subscribedtotopic")在添加到网页时不会神奇地选择新元素。

您应该编写一个函数并切换状态。

$(".subscribe").click(function () {
    var link = $(this);
    var isSubscribbed = link.hasClass("subscribedtotopic");
    link.toggleClass("subscribedtotopic notsubscribedtotopic");
    ...
});

Answer 2

我会将您的代码设置为：

$(document).ready(function () {
    // Subscribe to topic subscribedtotopic
    function subscribetotopic() {
        var topicid = $(this).attr('rel');
        $(this).slideUp('fast');
        $(this).html('Unsubscribe From Topic');
        $(this).removeClass('notsubscribedtotopic').addClass('subscribedtotopic');
        $(this).slideDown();
        $.get("/base/Solution/SubScribeToTopic/" + topicid + ".aspx",
            function (data) {
                var result = $('value', data).text();
            });
        return false;
    }

    // UnSubscribe to topic subscribedtotopic
    function unsubscribetotopic() {
        var topicid = $(this).attr('rel');
        $(this).slideUp('fast');
        $(this).html('Subscribe To Topic');
        $(this).removeClass('subscribedtotopic').addClass('notsubscribedtotopic');
        $(this).slideDown();
        $.get("/base/Solution/UnSubScribeToTopic/" + topicid + ".aspx",
            function (data) {
                var result = $('value', data).text();
            });
        return false;
    }
});

然后在HTML元素中进行简单的onclick调用，如下所示：

<button onclick="subscribetotopic()">Subscribe</button>

如果您希望保持代码的原样，那么请说明您想要激活哪个元素。示例（只需设置一个div w / id mymainelement和按钮w / id subscribebutton）：

$(#mymainelement .subscribebutton).click(function() { ... });

如果你想切换按钮而不是两个单独的元素，请查看@ epsacarello的答案。

Javascript函数仅在页面刷新后才起作用

2 个答案: