Question

我试图让这个页面工作，有一个垂直的图片行（缩略图大小），然后你可以点击它，使它们滚动到全宽，并显示大量的文字和快乐的东西。我已经设法做到了这一切。但是，如果我单击一个缩略图，则应该关闭任何打开的缩略图。我已经实现了IF语句和类检查：

$("a#shins-rec1").clickToggle(
function(){
        if ($(".shins-rec").hasClass('done')) {
            $(".shins-rec").filter($(".done").not($(this))).animate({
              left: $(".shins-rec").filter($(".done").not($(this))).width() / 2 - 60,
              width: '120px'}, 250, function(){
                $(this).removeClass('done');
            });
        } else {
            $(this).parent().animate({left: 0, width:'100%'}, 250, function(){
                $(this).addClass('done')
            });
        };
},
function(){
    $(this).parent().animate({
      left: $(this).parent().width() / 2 - 60,
      width: '120px'}, 250, function(){
        $(this).removeClass('done')
    }); // even clicks
});

可以正常工作，但是在不同缩略图上单击两次或三次以打开它们并关闭其他缩略图后，已打开的缩略图会卡住，并且点击的缩略图会打开，因为它应该打开。您必须单击单击的缩略图才能关闭另一个缩略图，然后您必须等待一段时间，直到您可以单击单击的缩略图以再次正确关闭它。之后，它就像这样。

我已经尝试过使用名为Summer of GOTO的插件，因为我认为它与检查是否有任何＆＃34;完成＆＃34;有关。是不是类，所以我想在JQuery中使用goto重新检查一下。使用WHILE语句也没有用，但这可能是因为我不理解这个功能。

任何人都知道如何解决这个问题？

提前致谢。

编辑：：JSfiddle of what I'm working on

Answer 1

看起来你在每个缩略图上点击的点击都有相同的ID，元素的ID假设是唯一的，你可以像这样使用类

$("a.shins-rec1").clickToggle(
function(){
        if ($(".shins-rec").hasClass('done')) {
            $(".shins-rec").filter($(".done").not($(this))).animate({
              left: $(".shins-rec").filter($(".done").not($(this))).width() / 2 - 60,
              width: '120px'}, 250, function(){
                $(this).removeClass('done');
            });
        } else {
            $(this).parent().animate({left: 0, width:'100%'}, 250, function(){
                $(this).addClass('done')
            });
        };
},
function(){
    $(this).parent().animate({
      left: $(this).parent().width() / 2 - 60,
      width: '120px'}, 250, function(){
        $(this).removeClass('done')
    }); // even clicks
});

Answer 2

我终于得到了我的问题的答案，在另一个论坛上有人改写了我的代码，因为它很乱，而且事情是重复的，他们解决了问题。

Here是JSfiddle，以防任何人想要调查它。

由于某种原因，缩略图的方向发生了变化，这使得“左”的0值位于中心的缩略图位置，240或类似位置使其向右移动。但我只是通过切换左值并将240或类似值更改为负数来改变它，如下所示。

var rightPos = -1 * ($('div.content-ins-used').width() / 2 - 60);

非常感谢您的帮助！

JQuery - IF语句只能工作两到三次

2 个答案: