为什么这段 jQuery 代码只适用于一次迭代？

发布于 2024-12-27 21:36:55 字数 583 浏览 0 评论 0原文

基本上我有一个下拉图标，它应该展开和折叠其下方的区域。它会更改背景位置并指向下方并显示一些内容。再次单击时，它会折叠内容并更改背景位置。下面是我写的，但它不能正常工作。

$(function() {
    $(".aclass").live('click' , function() {
        $(this).css("background-position","-156px -42px").addClass("new");

        $(".blockedDiv").hide();
        $(".mystery").css("max-height","189px");
    });

    $(".new").live('click', function() {
        $(this).css("background-position","0px 0px");
        $(".blockedDiv").show();
        $(".mystery").css("max-height","1007px");
    });
});

我的两个问题： 1：为什么这只适用于一次迭代 2：有没有更好的方法来实现这一点？

原文

Basically I have a drop icon, which should expand and collpase an area beneath it. It changes the background position and points downwards and shows some content.On click again it collapses the content and changes the background position. below is what i have written but it doesn't work properly.

$(function() {
    $(".aclass").live('click' , function() {
        $(this).css("background-position","-156px -42px").addClass("new");

        $(".blockedDiv").hide();
        $(".mystery").css("max-height","189px");
    });

    $(".new").live('click', function() {
        $(this).css("background-position","0px 0px");
        $(".blockedDiv").show();
        $(".mystery").css("max-height","1007px");
    });
});

My two questions:
1: Why is this working only for one Iteration
2: Is there a better way to achieve this.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

茶色山野 2025-01-03 21:36:55

您不会删除添加的 new 类。因此，当您再次单击它时，第二个事件处理程序也会触发，从而反转第一个事件处理程序的操作。

作为旁注斜杠提示，您想要的是指定显式 CSS 规则，您可以使用 jQuery 进行切换，这样您就不必搞砸（相对）复杂的逻辑。

.mystery { max-height:10007px; }
.mystery.flagged { max-height:189px; }

.aclass { background-position:0 0; }
.aclass.flagged { background-position:-156px -42px; }

然后在你的 jQuery 中：

$('.aclass').live('click', function () {
    $('.mystery').toggleClass('flagged');
    $(this).toggleClass('flagged');
    $('.blockedDiv').toggle();
});

You're not removing the new class you added. Because of that, when you click on it again, the second event handler fires as well, reversing what the first event handler did.

As a side note-slash-tip, what you want is to specify explicit CSS rules, which you can toggle with jQuery, so that you don't have to muck through (relatively) complicated logic.

.mystery { max-height:10007px; }
.mystery.flagged { max-height:189px; }

.aclass { background-position:0 0; }
.aclass.flagged { background-position:-156px -42px; }

then in your jQuery:

$('.aclass').live('click', function () {
    $('.mystery').toggleClass('flagged');
    $(this).toggleClass('flagged');
    $('.blockedDiv').toggle();
});

回复收藏 0 原文

请恋爱 2025-01-03 21:36:55

理查德已经指出了您的代码的问题。您需要切换 new 类。

更简洁的方法可能是使用 toggleClass() jQuery 函数。

你定义了两个 CSS 类：

.hiddenDiv {...}
.expandedIcon {...}
.collapsedIcon {...}

和 JS：

$(function(){
   $(".aClass").click(function(){
         $(".blockDiv").toggleClass("hiddenDiv");
         $(this).toggleClass("expandedIcon");
         $(this).toggleClass("collapsedIcon");

    });
})

在你的 HTML 中，有类似的内容：

<div class="aClass collapsedIcon"> </div> <!-- initially collapsed -->
<div class="blockDiv hiddenDiv"> </div> <!-- initially hidden -->

Richard has already pointed out the problem with your code already. You need to toggle the new class.

A cleaner way to this is probably using the toggleClass() jQuery function.

You define two CSS classes:

.hiddenDiv {...}
.expandedIcon {...}
.collapsedIcon {...}

And JS:

$(function(){
   $(".aClass").click(function(){
         $(".blockDiv").toggleClass("hiddenDiv");
         $(this).toggleClass("expandedIcon");
         $(this).toggleClass("collapsedIcon");

    });
})

And in your HTML, have something like:

<div class="aClass collapsedIcon"> </div> <!-- initially collapsed -->
<div class="blockDiv hiddenDiv"> </div> <!-- initially hidden -->

回复收藏 0 原文

彼岸花似海 2025-01-03 21:36:55

这是一种稍微不同的方法，应该可行。

$(function() {
    $(".aclass").live('click' , function() {
        var $this = $(this), // cache the result of the function to prevent recreating it each time
            is_expanded = $this.hasClass('new');
        $this.css({'background-position': (is_expanded ? '-156px -42px' : '0px 0px')});
        $('.mystery').css({'max-height': (is_expanded ? '189px' : '1007px')});
        if (is_expanded) {
            $('.blockedDiv').show();
            $this.removeClass('new');
        } else {
            $('.blockedDiv').hide();
        }
        $this.addClass('new'); // won't do anything if it already has the class
    });
});

编辑：正如 @Richard Neil Ilagan 提到的，你（和我）忘记删除 new 类。

Here is a slightly different way of doing it that should work.

$(function() {
    $(".aclass").live('click' , function() {
        var $this = $(this), // cache the result of the function to prevent recreating it each time
            is_expanded = $this.hasClass('new');
        $this.css({'background-position': (is_expanded ? '-156px -42px' : '0px 0px')});
        $('.mystery').css({'max-height': (is_expanded ? '189px' : '1007px')});
        if (is_expanded) {
            $('.blockedDiv').show();
            $this.removeClass('new');
        } else {
            $('.blockedDiv').hide();
        }
        $this.addClass('new'); // won't do anything if it already has the class
    });
});

EDIT: As @Richard Neil Ilagan mentioned, you (and I) forgot to remove the new class.

回复收藏 0 原文