Question

我正在处理一个简单的叠加层，它会在点击页面时将图像放在页面上的其他内容之前。这是overlay.js文件：

var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
var $caption = $("<p></p>");

$overlay.append($image);
$overlay.append($caption);

$("body").append($overlay);

$(".overlay-container a").click(function(event){
    event.preventDefault();
    var imageLocation = $(this).attr("href");

    $image.attr("src", imageLocation);

    $overlay.show();

    var captionText = $(this).attr("alt");
    $caption.text(captionText);
});

$overlay.click(function(){
    $overlay.hide();
});

这是我的HTML布局：

<span class="overlay-container">
    <div class="pic_column">
        <div class="picture">
            <span>Truck Load</span>

            <a alt="Truck Load" href="images/truckload.jpg" />
                <div class="pic_container">
                    <img alt="Truck Load" src="images/truckload.jpg" />
                </div>
            </a>
        </div>
    </div>
</span>

单击时，浏览器会直接转到图像，而不是收听JS。我选择点击错误了吗？（.overlay-container a）

Jquery Overlay - 没有按预期工作

0 个答案: