Question

我正在创建一个简单的悬停“地图”。基本上悬停在标记上，并显示带有详细信息的弹出窗口。无论如何，除了我想添加一个关闭按钮之外，它大部分工作正常。现在，用户可以在弹出窗口外单击并将其关闭，但我需要在角落添加关闭按钮。但是，我的结束活动不会开火。暂时我只是想设置用户点击内容弹出窗口中的任何位置并关闭它。一旦我完成了工作，我将把它应用到容器中的样式div。这是我的HTML示例：

<div id="container">
<div id="truck"><img src="eVie.png" width="637" height="280" alt="Evie" /></div>
<div class="marker a">
<div class="content a inactive"><img src="solarpanel.jpg" width="240" height="205" alt="Solar Panels" />
  <h2>Solar Panels</h2>
  <p>Here Comes The Sun: These solar panels capture light and heat from the sun to power exhibits when I’m out visiting around town.</p>
 </div>
 </div>
 <div class="marker b">
 <div class="content b inactive"><img src="tailpipe.jpg" width="240" height="205" alt="Tailpipe Area" />
  <h2>Tailpipe Area</h2>
  <p>No tailpipe, no fumes. That’s how I roll.</p>
 </div>
 </div>
 <div class="marker c">
 <div class="content c inactive"><img src="plug.jpg" width="240" height="205" alt="Plug" />
  <h2>Plug</h2>
  <p>Not An Ordinary Plug: Big trucks need more energy. To get all the energy I need, I have to have a bigger plug and a special outlet!</p>
 </div>
 </div>
 </div>

这是我的jQuery。除了content.active单击功能外，所有这些工作正常。为什么？我很难过！

$(document).ready(function(){

    $(".marker").hover(
        function(){
            $(this).children(".content.inactive").addClass("show");  
            $(this).children(".content.inactive").animate({width: 155}, "fast");     
        }
        ,
        function(){
            $(this).children(".content.inactive").animate({width: 5, height: 23}, "fast");
            $(this).children(".content.inactive").removeClass("show");       
        }
    );

    $(".content.inactive").click(
        function(){
            $(this).removeClass("inactive");
            $(this).addClass("active");  
            $(this).animate({width: 435, height: 205}, "fast"); 
            $(".inactive").addClass("disabled");
            $(".disabled").removeClass("inactive"); 
            $(".disabled").parent().addClass("dim");
            $("#truck img").addClass("dim");
        }
    );

    $(".content.active").click(
        function(){
            $(this).removeClass("active");
            $(this).removeClass("show");
            $(this).addClass("inactive");    
            $(this).animate({width: 5, height: 23}, "fast");
            $(".disabled").addClass("inactive");
            $(".disabled").parent().removeClass("dim");
            $(".inactive").removeClass("disabled");
            $("#truck img").removeClass("dim");
        }
    );

    $(".content").click(function(){ return false; });
    $(document).on("click", function() { 
        $(".content").animate({width: 5, height: 23}, "fast");
        $(".disabled").addClass("inactive");
        $(".inactive").removeClass("disabled"); 
        $(".inactive").parent().removeClass("dim");
        $("#truck img").removeClass("dim"); 
        $(".active").addClass("inactive");
        $(".show").removeClass("show");
        $(".active").removeClass("active"); 
    });
});

以下是该网站的链接：http://stlenergy.org/evie/

任何帮助都会非常感激。我确信我的逻辑不对，或者我错过了一些非常明显的东西。谢谢！

Answer 1

我相信这是因为在宣布监听器的时候，将不会有包含类content和active的包装集。因此click()侦听器不会被分配给任何元素。

您可以执行以下操作：

$(".content").click( 
function(){ 
    var inactiveObjects = $(this).hasClass("inactive"); 
    inactiveObjects.removeClass("inactive");
    inactiveObjects.addClass("active");   
    inactiveObjects.animate({width: 435, height: 205}, "fast");  
    $(".inactive").addClass("disabled"); 
    $(".disabled").removeClass("inactive");  
    $(".disabled").parent().addClass("dim"); 
    $("#truck img").addClass("dim");

    var activeObjects = $(this).hasClass("active"); 
    activeObjects.removeClass("active");
    activeObjects.removeClass("show"); 
    activeObjects.addClass("inactive");     
    activeObjects.animate({width: 5, height: 23}, "fast"); 
    $(".disabled").addClass("inactive"); 
    $(".disabled").parent().removeClass("dim"); 
    $(".inactive").removeClass("disabled"); 
    $("#truck img").removeClass("dim");  
} 
);

Answer 2

使用此：

function inactiveClick(){
            $(this).removeClass("inactive");
            $(this).addClass("active");  
            $(this).animate({width: 435, height: 205}, "fast"); 
            $(".inactive").addClass("disabled");
            $(".disabled").removeClass("inactive"); 
            $(".disabled").parent().addClass("dim");
            $("#truck img").addClass("dim");
        $(this).unbind('click'); // added this
        $(this).click(activeClick); // added this
        return false; // added this
}
function activeClick(){
            $(this).removeClass("active");
            $(this).removeClass("show");
            $(this).addClass("inactive");    
            $(this).animate({width: 5, height: 23}, "fast");
            $(".disabled").addClass("inactive");
            $(".disabled").parent().removeClass("dim");
            $(".inactive").removeClass("disabled");
            $("#truck img").removeClass("dim");
        $(this).unbind('click'); // added this
        $(this).click(inactiveClick); // added this
        return false; // added this
}
$(document).ready(function(){

    $(".marker").hover(
        function(){
            $(this).children(".content.inactive").addClass("show");  
            $(this).children(".content.inactive").animate({width: 155}, "fast");     
        }
        ,
        function(){
            $(this).children(".content.inactive").animate({width: 5, height: 23}, "fast");
            $(this).children(".content.inactive").removeClass("show");       
        }
    );

    $(".content.inactive").click(
        inactiveClick
    );

    $(".content.active").click(
        activeClick
    );
    //$(".content").click(function(){ return false; }); // removed so I can unbind the elements
    $(document).on("click", function() { 
        $(".content").animate({width: 5, height: 23}, "fast");
        $(".disabled").addClass("inactive");
        $(".inactive").removeClass("disabled"); 
        $(".inactive").parent().removeClass("dim");
        $("#truck img").removeClass("dim"); 
        $(".active").addClass("inactive");
        $(".show").removeClass("show");
        $(".active").removeClass("active"); 
    });
});

Shark提到的问题是，在单击它们之前，您的元素没有active类，因此它们永远不会绑定点击事件。

我做了以下事情：

将非活动和有效点击划分为各自的功能
在两个函数中添加了返回false
取消绑定点击功能结束时的元素
将新点击事件绑定到点击功能结束时的元素

编辑：我当时不知道，但jQuery有一个.on（）方法，非常适合您的情况：

$(document).ready(function(){

    $(".marker").hover(
        function(){
            $(this).children(".content.inactive").addClass("show");  
            $(this).children(".content.inactive").animate({width: 155}, "fast");     
        }
        ,
        function(){
            $(this).children(".content.inactive").animate({width: 5, height: 23}, "fast");
            $(this).children(".content.inactive").removeClass("show");       
        }
    );

    $('body').on('click',".content.inactive",function(){
        $(this).removeClass("inactive");
            $(this).addClass("active");  
            $(this).animate({width: 435, height: 205}, "fast"); 
            $(".inactive").addClass("disabled");
            $(".disabled").removeClass("inactive"); 
            $(".disabled").parent().addClass("dim");
            $("#truck img").addClass("dim");
        }
    );

    $('body').on('click',".content.active",function(){
        $(this).removeClass("active");
            $(this).removeClass("show");
            $(this).addClass("inactive");    
            $(this).animate({width: 5, height: 23}, "fast");
            $(".disabled").addClass("inactive");
            $(".disabled").parent().removeClass("dim");
            $(".inactive").removeClass("disabled");
            $("#truck img").removeClass("dim");
    });
    $(".content").click(function(){ return false; }); // removed so I can unbind the elements
    $(document).on("click", function() { 
        $(".content").animate({width: 5, height: 23}, "fast");
        $(".disabled").addClass("inactive");
        $(".inactive").removeClass("disabled"); 
        $(".inactive").parent().removeClass("dim");
        $("#truck img").removeClass("dim"); 
        $(".active").addClass("inactive");
        $(".show").removeClass("show");
        $(".active").removeClass("active"); 
    });
});

Answer 3

我只看了你的网站。如果您删除.content.active和.content的点击处理程序并将return false;添加到.content.inactive处理程序的末尾，我认为您可以使用现有代码获得所需内容。如果单击活动内容不返回false，则单击事件将冒泡到document处理程序，并且应关闭打开的对话框。这样做的另一个好处是可以让对话框在一个地方关闭代码。

Jquery事件不会触发

3 个答案: