Javascript jquery的执行方式不正确

我有一些jquery要先给你看

$(function(){
    function darkBox(div){
        var w = (div.attr('width')) ? div.attr('width') : div.width();

        var h = (div.attr('height')) ? div.attr('height') : div.height();

        var box = $('<div></div>').addClass('darkCover');
        $('body').prepend(box);
        box.fadeTo('fast', 0.8);

        var contentBox = $('<div></div>').html(div.html());
        contentBox.addClass('darkContent');

        var x = $(window).width()/2;
        var y = $(window).height()/2;
        var startW = h-y/2;
        var startH = w-x/2;
        var endTop = y - h/2;
        var endLeft = x - w/2;

        contentBox.css("left", x+"px");
        contentBox.css("top", startW+"px");
        contentBox.css("z-index", "910");
        contentBox.css("width", w+"px");
        contentBox.css("height", h+"px");

        $('body').prepend(contentBox);
        // contentBox.fadeIn('slow')
        contentBox.animate({
            opacity: 1,
            width:w+"px",
            height:h+"px",
            top:endTop+"px",
            left:endLeft+"px"
        }, 1000, "easeOutExpo");

        box.click(function(){
            box.fadeOut();
            contentBox.fadeOut();
        });
    }

    $('.darkBox').each(function(){
        var div = $($(this).attr('href'));
        div.hide();
        $(this).click(function(){
            darkBox(div);
        });
    });
});

和html

<a href="#useThisDiv" class="btn blue btn-xs darkBox">Show Box</a>
<div id="useThisDiv" width="500" height="500">
    <table>
        <tr>
            <td>
                array index and a corresponding array value each time. (The value can also be accessed through the this keyword, 
            </td>
        </tr>
        <tr>
            <td>
                array index and a corresponding array value each time. (The value can also be accessed through the this keyword, 
            </td>
        </tr>
        <tr>
            <td>
                array index and a corresponding array value each time. (The value can also be accessed through the this keyword, 
            </td>
        </tr>
    </table>
</div>

数组索引和每次对应的数组值。（也可以通过this关键字访问该值，
数组索引和相应的数组值。（也可以通过this关键字访问该值，
数组索引和相应的数组值。（也可以通过this关键字访问该值，

我不知道问题在哪里，但我的问题是当我点击带有类

darkBox

的锚标记时，它只是将我重定向到另一个页面。它实际上创建了

var框

div，并在一秒钟内消失了。没有这个，我当前的jquery工作正常。请帮助

如果你不能解决这个问题，我只想在每次用户点击按钮时打开一个弹出div，背景应该变得稍微不透明，用户可以在这个框中输入数据

---

有什么想法吗？

您需要使用

preventDefault

阻止单击事件的默认行为。现在您的浏览器将重定向到anchor#useThisDiv

将代码更新为：

$('.darkBox').each(function(){
    var div = $($(this).attr('href'));
    div.hide();
    $(this).click(function(event){
        event.preventDefault();
        darkBox(div);
    });
});

---

或者，使用

data-

属性而不是

href

来定义这种额外的功能。请参阅。

如果在锚定单击时使用preventDefault（），该怎么办？$（此）。单击（函数（e）{e.preventDefault（）；darkBox（div）；}）；@SSA它仍然会转到索引页…不知道为什么：（但这会阻止这行代码

box.click（function（）{box.fadeOut（）；contentBox.fadeOut（）；}）

无法使此消失，这不应该是解决方案，因为我不要求它转到任何页面，只需打开该页面上的div。感谢您的努力，尽管我按了向上箭头，但如果您知道实现此目的的任何其他方法，我很乐意按照这些说明进行操作。稍后我将更新小提琴，单击处理程序删除该框将立即被调用，而不是再次单击。您能检查一下吗？我已更新了小提琴。您需要注意内存泄漏，因为此代码非常泄漏。进行一些重组会有所帮助。（但在我看来，这与您的问题无关）我将

#useThisDiv

从href移动到数据目标，并在创建

框

变量之后移动了单击处理程序以删除覆盖。可能与JavaScript如何将函数和变量声明提升到顶部有关，但正如我所说，您需要检查此代码是否存在内存泄漏：）.很高兴帮助和GL学习jQuery。

$('.darkBox').each(function(){
    var div = $($(this).attr('href'));
    div.hide();
    $(this).click(function(event){
        event.preventDefault();
        darkBox(div);
    });
});