jq的div显示问题

Question

修改了一个小提琴来做多次，但它有一个错误的多次...单击链接1时，div 1和2会受到影响。

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

这里的问题可能是什么？

http://jsfiddle.net/bluey/zsMaE/3/

  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

您已经定义了"deselect()“函数两次。您可以将第二个重命名为"deselect2"，但有一个更好的方法。

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

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;
});

注释中问题的更新

如果您希望一次只显示一个<div>，您可以跟踪哪个是可见的，并在使另一个可见之前将其隐藏，但在显示之前只需将其全部隐藏起来会更容易。所有的messagepop都有“<div>”类，所以很容易将它们全部选中。

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

注意:如果我们用.hide()隐藏它们，我可能会使用'.messagepop'作为选择器，并隐藏所有它们，但由于.slideFadeToggle()会切换它们，所以我使用'.messagepop:visible'将切换限制在可见的部分。

Answer 2

您正在声明2次取消选择！所以很明显第二个命令会覆盖第一个命令

做一个插件

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

然后立即绑定你的2个联系人(为它们添加一个类)，然后使用$(this)