Question

在网站上使用一些家庭酿造（使用谷歌的帮助）javscript。它在Firefox，Safari，Chrome中显示得很好，但当然不适用于Internet Explorer。我还没有在IE8中测试IE7，但我需要让IE7无bug。

基本上，我从Flickr抓取照片并通过WordPress的FlickrRSS插件输出。我将在下面发布相关代码。我的问题是这样的：悬停图像会为任何没有标题/标题的图像显示弹出（更大）的图像。对于那些有标题的人，弹出图像根本不显示（但是这个错误只发生在IE7中）。我真的不确定这是否是JS或CSS错误，因为我无法进入DOM以查看IE7中发生了什么，因为该元素仅在以下时间附加：hover然后在mouseout上删除。任何调试帮助......请问？！

可以在此处看到该网站的实时版本：http://yasmeenadance.com（向下滚动到视频下方的照片缩略图）。

这是我为每个元素输出的HTML％标签表示插件的短代码：

    <div class="popup">
        <a href="%image_medium%" class="preview" title="%title%"><img src="%image_square%" alt="%title%"  /></a> 
<img class="preload" style="display: none !important;" src="%image_medium%">
    </div>

这是弹出窗口的HTML（动态生成并附加到固定位置的body标签）

<p id="preview"><img src="large_img_url" alt="Image preview ... Loading" />Img Title Goes here as caption</p>

以下是相关的javascript / jquery代码：

//The overlay or pop-up effect
this.imagePreview = function(){ 
    /* CONFIG */

        xOffset = 40;
        yOffset = 120;

        // these 2 variable determine popup's distance from the cursor
        // you might want to adjust to get the right result

    /* END CONFIG */
    $("a.preview").click(function(e){
        return false;
        });
    $("a.preview").hover(function(e){
        this.t = this.title;
        this.title = "";    
        var c = (this.t != "") ? "<br/><span>" + this.t : "</span>";
        $("body").append('<p id="preview"><img src="'+ this.href +'" alt="Image preview ... Loading" />'+ c +'</p>');
        $("#preview")
            .hide()
            .css("top",(e.pageY - yOffset) + "px")
            .css("left",(e.pageX + xOffset) + "px")
            .fadeIn("2000");                        
    },
    function(){
        this.title = this.t;    
        $("#preview").remove();
    }); 
    $("a.preview").mousemove(function(e){
        var top = e.pageY - yOffset;
        var left = e.pageX + xOffset;
        //flips the image if it gets too close to the right side
        while ((left + 500) > window.innerWidth){
             left -= jQuery("#preview").outerWidth() + xOffset*2;
        }
        $("#preview")
            .css("top",top + "px")
            .css("left",left + "px");
    });

Answer 1

以下三元：

var c = (this.t != "") ? "<br/><span>" + this.t : "</span>";

您说“如果这有标题，请插入换行符，然后打开一个范围并弹出标题。如果没有，则关闭一个span标记”。

基本上，第一个案例给你一个非封闭的跨度，第二个案例关闭一个从未打开的跨度。

正如@Basiclife所说的那样，准确的诊断，这是正确的语法：

var c = (this.t != "") ? "<br/><span>" + this.t + "</span>":"";

不寻常的Javascript图像标题错误

1 个答案: