Question

修改了一个小提琴来做倍数，但它有多个错误...当点击链接1时，div 1和2受到影响。

单击链接2时，只有div 2受影响。

这可能是什么问题？

  function deselect() {
        $(".pop").slideFadeToggle(function() { 
            $("#contact").removeClass("selected");
        });    
    }

    $(function() {
        $("#contact").live('click', function() {
            if($(this).hasClass("selected")) {
                deselect();               
            } else {
                $(this).addClass("selected");
                $(".pop").slideFadeToggle(function() { 

                });
            }
            return false;
        });

        $(".close").live('click', function() {
            deselect();
            return false;
        });
    });

    $.fn.slideFadeToggle = function(easing, callback) {
        return this.animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback);
    };



    function deselect() {
        $(".pop2").slideFadeToggle(function() { 
            $("#contact2").removeClass("selected");
        });    
    }

    $(function() {
        $("#contact2").live('click', function() {
            if($(this).hasClass("selected")) {
                deselect();               
            } else {
                $(this).addClass("selected");
                $(".pop2").slideFadeToggle(function() { 

                });
            }
            return false;
        });

        $(".close").live('click', function() {
            deselect();
            return false;
        });
    });

    $.fn.slideFadeToggle = function(easing, callback) {
        return this.animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback);
    };

Answer 1

你宣布2次取消选择！所以显然第二次覆盖了第一次

做一个插件

$.fn.extend({deselect : function () {$(this).removeClass('deselect')} });

然后立即绑定你的2个联系人（给他们上课）然后使用$(this)

Answer 2

您已经定义了两次“deselect（）”函数。您可以将第二个重命名为“取消选择2”，但有更好的方法可以执行此操作。

不要给链接提供唯一的ID，而是给它们相同的类（比如说“contact”）。然后，您可以轻松地为它们分配相同的单击事件处理程序。然后重写“deselect（）”函数以将链接作为参数。要将“messagepop”div与链接相关联，您可以为它们指定唯一的ID，然后将链接的href设置为div的ID。

HTML：

<div class="messagepop" id="pop1">ANYTHING HERE 1</div>
<div class="messagepop" id="pop2">ANYTHING HERE 2</div>
<a href="#pop1" class="contact">Contact Us 1</a>
<a href="#pop2" class="contact">Contact Us 2</a>

JavaScript的：

function select($link) {
    $link.addClass('selected');
    $($link.attr('href')).slideFadeToggle(function () {});
}

function deselect($link) {
    $($link.attr('href')).slideFadeToggle(function () {
        $link.removeClass('selected');
    });
}

$('.contact').click(function () {
    var $link = $(this);
    if ($link.hasClass('selected')) {
        deselect($link);
    } else {
        select($link);
    }
    return false;
});

jsfiddle

评论中的问题更新

如果您希望一次仅显示<div>个中的一个，则可以跟踪哪一个是可见的，并在另一个可见之前隐藏它，但在显示之前更容易隐藏它们一。 <div>都有“messagepop”类，所以很容易选择它们。

function select($link) {
    $link.addClass('selected');
    $('.messagepop:visible').slideFadeToggle(function () {});
    $($link.attr('href')).slideFadeToggle(function () {});
}

注意：如果我们使用.hide()隐藏它们，我可能会使用'.messagepop'作为选择器并隐藏所有选项，但由于.slideFadeToggle()切换它们，我选择'.messagepop:visible' 1}}将切换限制为仅显示切换。

div显示jq的问题

2 个答案: