Question

我试图通过网站上的书签ID来连接jQuery的动画功能。当我点击链接时，它没有动画就转到了我的书签ID但是当我再次点击相同的链接时，动画就可以了。

var TitleNav = React.createClass({
    handleSubmitClick:function()
    {
        $('a').click(function()
        {
            $('html, body').animate(
            {
                scrollTop: $( $.attr(this, 'href') ).offset().top
            }, 500);
            return false;
        });
    },

    render:  function() {
        return(
            <div>
                <ul className = "nav">
                    <li className = "navworkspace" onClick ={this.handleSubmitClick}><a href="#work">Work</a></li>
                </ul>
            </div>
        );
    }
});

我认为这是组件被调用的方式，因为组件不会彼此等待。有办法解决这个问题吗？

注意：我使用React.Js来渲染我的网站。

Answer 1

确切地说这段代码应该做什么。

首次点击handleSubmitClick，然后在a创建点击处理程序。

因此，只有在第二次点击时，才会安装a上的点击处理程序并执行代码。实际上，您每次点击都会在a上创建一个新的点击处理程序。

所以基本上，只需删除a的额外点击处理程序，然后直接在onclick li中执行它的正文：

    var TitleNav = React.createClass({
    handleSubmitClick:function()
    {
            $('html, body').animate(
            {
                scrollTop: $($.attr(this.refs.link, 'href')).offset().top
            }, 500);
    },

    render:  function() {
        return(
            <div>
                <ul className = "nav">
                    <li className = "navworkspace"><a ref="link" href="#work" onClick ={this.handleSubmitClick}>Work</a></li>
                </ul>
            </div>
        );
    }
});

Answer 2

原因是你的handleSubmitClick函数只将click事件处理程序绑定到链接，但不会触发事件。因此，当您第一次单击链接时，它只会绑定事件。之后，由于处理程序是绑定的，动画第二次工作，依此类推。您可以将代码更改为

var TitleNav = React.createClass({
    componentDidMount: function()
    {
        $('.nav a').click(function()
        {
            $('html body').animate(
            {
                scrollTop: $(this).offset().top
            }, 500);
            return false;
        });
    },

    render:  function() {
        return(
            <div>
                <ul className = "nav">
                    <li className = "navworkspace"><a href="#work">Work</a></li>
                </ul>
            </div>
        );
    }
});

或者你可以这样做

var TitleNav = React.createClass({
    handleSubmitClick: function(e)
    {
        $('html body').animate(
        {
            scrollTop:$(e.target).offset().top
        }, 500);
        return false;

    },

    render:  function() {
        return(
            <div>
                <ul className = "nav">
                    <li className = "navworkspace" ><a href="#work" onClick ={this.handleSubmitClick}>Work</a></li>
                </ul>
            </div>
        );
    }
});

jQuery Animate在第一次点击后工作

2 个答案: