我必須單擊兩次才能觸發JQuery單擊功能

Question

這是小提琴 。 我有個問題; 似乎幾乎是隨機的。 每當我單擊div觸發動畫時，都必須單擊兩次以使動畫啟動。 提一下，在小提琴中，由於某種原因，動畫無法正常工作，因此只需假設需要兩次單擊即可為每個div設置動畫。 這是我所不想要的。

HTML

<footer>
    <one id="one">
        <p unselectable="on"></p>
    </one>
    <two id="two">
        <p unselectable="on"></p>
    </two>
    <three-info>
    </three-info>
    <three id="three">
        <p unselectable="on"></p>
    </three>
</footer>

JavaScript的

$(document).ready(function () {
    $('#three').click(function () {
        var clicks = $(this).data('clicks');
        if (clicks) {
            $("#three").animate({
                marginLeft: $(window).width() - 900 + 'px'
            }, 745, 'linear');
        } else {
            $("#three").animate({
                marginLeft: 0 + 'px'
            }, 800, 'linear');
        }
        $(this).data("clicks", !clicks);
        if ($("#two").css("marginLeft") == $(window).width() - 900 + 'px') {
            $("#two").animate({
                marginLeft: 0 + 'px'
            }, 100, 'linear');
            $("#three").animate({
                marginLeft: $(window).width() - 900 + 'px'
            }, 745, 'linear');
        }
        if ($("#one").css("marginLeft") == $(window).width() - 900 + 'px') {
            $("#one").animate({
                marginLeft: 0 + 'px'
            }, 100, 'linear');
            $("#three").animate({
                marginLeft: $(window).width() - 900 + 'px'
            }, 745, 'linear');
        }
    });
    $('#two').click(function () {
        var clicks = $(this).data('clicks');
        if (clicks) {
            $("#two").animate({
                marginLeft: $(window).width() - 900 + 'px'
            }, 745, 'linear');
        } else {
            $("#two").animate({
                marginLeft: 0 + 'px'
            }, 700, 'linear');
        }
        $(this).data("clicks", !clicks);
        if ($("#three").css("marginLeft") == $(window).width() - 900 + 'px') {
            $("#three").animate({
                marginLeft: 0 + 'px'
            }, 100, 'linear');
            $("#two").animate({
                marginLeft: $(window).width() - 900 + 'px'
            }, 745, 'linear');
        }
        if ($("#one").css("marginLeft") == $(window).width() - 900 + 'px') {
            $("#one").animate({
                marginLeft: 0 + 'px'
            }, 100, 'linear');
            $("#two").animate({
                marginLeft: $(window).width() - 900 + 'px'
            }, 745, 'linear');
        }
    });
    $('#one').click(function () {
        var clicks = $(this).data('clicks');
        if (clicks) {
            $("#one").animate({
                marginLeft: $(window).width() - 900 + 'px'
            }, 745, 'linear');
        } else {
            $("#one").animate({
                marginLeft: 0 + 'px'
            }, 700, 'linear');
        }
        $(this).data("clicks", !clicks);
        if ($("#two").css("marginLeft") == $(window).width() - 900 + 'px') {
            $("#two").animate({
                marginLeft: 0 + 'px'
            }, 100, 'linear');
            $("#one").animate({
                marginLeft: $(window).width() - 900 + 'px'
            }, 745, 'linear');
        }
        if ($("#three").css("marginLeft") == $(window).width() - 900 + 'px') {
            $("#three").animate({
                marginLeft: 0 + 'px'
            }, 100, 'linear');
            $("#one").animate({
                marginLeft: $(window).width() - 900 + 'px'
            }, 745, 'linear');
        }
    });
});

CSS

footer {
    margin: 0;
    padding: 0;
    float: left;
    width: 100%;
    height: 115px;
    background-color: #4a4a4a;
    overflow: visible !important;
    -webkit-user-select: none; /* Chrome/Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */

/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
}
one {
    margin: 0;
    padding: 0;
    float: left;
    width: 200px;
    background-color: pink;
    height: 115px;
    margin-left: 0px;
    display: block;
}
one,two,three {
    text-align: center;
    color: white;
    font-family: "Raleway", Arial, Helvetica, Trebuchet MS, Tahoma, sans-serif;
    font-weight: bold;
    font-size: 16px;
    line-height: 115px;
}
one:hover {
    background: black;
    margin: 0;
    padding: 0;
    height: 115px;
    float: left;
    transition: all 0.3s ease-out; 
    cursor: pointer;
}
two:hover {
    background: black;
    margin: 0;
    padding: 0;
    height: 115px;
    float: left; 
    transition: all 0.3s ease-out;
    cursor: pointer;
}
three:hover {
    background: black;
    margin: 0;
    padding: 0;
    height: 115px;
    float: left; 
    transition: all 0.3s ease-out;
    cursor: pointer;
}
two {
    margin: 0;
    padding: 0;
    float: left;
    width: 200px;
    background-color: gray;
    height: 115px;
    margin-left: 0px;
    display: block;
}
three {
    margin: 0;
    padding: 0;
    float: left;
    width: 200px;
    background-color: black;
    height: 115px;
    margin-left: 0px;
    display: block;
}

Answer 1

您的代碼要求您單擊兩次，因為第一次單擊時尚未設置clicks數據，因此if語句的else子句首先出現

//"clicks" will be undefined the first time through
var clicks = $(this).data('clicks'); 
if (clicks) {
   $("#two").animate({marginLeft: $(window).width()-900 +'px'}, 745, 'linear');
} else {
   //so this part gets executed first
   $("#two").animate({marginLeft: 0 +'px'}, 700, 'linear');
}

您可以設置data- *屬性，也可以使用.data（）進行設置

$("#three").data('clicks',true);
$("#two").data('clicks',true);
$("#one").data('clicks',true);

要么

<three id="three" data-clicks="1">

小提琴

Answer 2

問題是，第一次單擊元素時， data-clicks屬性的值是undefined 。 您可以通過添加data-clicks="true"在HTML中設置此值，也可以在Javascript中將該值設置為

$('#one, #two, #three').data('clicks', true);

我還優化了您的代碼以使其干燥。

演示

 $(document).ready(function() { // To animate the other elements than the clicked one function animateOthers(clickedElement, otherElement) { otherElement.animate({ marginLeft: 0 + 'px' }, 100, 'linear'); clickedElement.animate({ marginLeft: $(window).width() - 900 + 'px' }, 745, 'linear'); } // To animate the element that is clicked function animate(clicks, first, otherElements) { var leftMargin = ($(window).width() - 900) + 'px'; var left = '0px', duration = 800; if (clicks) { // Update the marginLeft and duration to animate left = leftMargin; duration = 745; } // Animate the clicked element first.animate({ marginLeft: left }, duration, 'linear'); // For other elements otherElements.forEach(function(v) { if ($('#' + v).css('marginLeft') == leftMargin) { animateOthers(first, $('#' + v)); } }); // Update the data-clicks value by negating it first.data("clicks", !clicks); } // Array of all the elements var elements = ['one', 'two', 'three']; // Bind click event on the elements on the array $('#' + elements.join(',#')).on('click', function() { var clicks = $(this).data('clicks'); var clickedElement = $(this).attr('id'), otherElements = elements.slice(); otherElements.splice(elements.indexOf(clickedElement), 1); // otherElements is the array of the elements other than the clicked animate(clicks, $(this), otherElements); }); }); 

 footer { margin: 0; padding: 0; float: left; width: 100%; height: 115px; background-color: #4a4a4a; overflow: visible !important; -webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+ */ /* Rules below not implemented in browsers yet */ -o-user-select: none; user-select: none; } one { margin: 0; padding: 0; float: left; width: 200px; background-color: pink; height: 115px; margin-left: 0px; display: block; } one, two, three { text-align: center; color: white; font-family: "Raleway", Arial, Helvetica, Trebuchet MS, Tahoma, sans-serif; font-weight: bold; font-size: 16px; line-height: 115px; } one:hover { background: black; margin: 0; padding: 0; height: 115px; float: left; transition: all 0.3s ease-out; cursor: pointer; } two:hover { background: black; margin: 0; padding: 0; height: 115px; float: left; transition: all 0.3s ease-out; cursor: pointer; } three:hover { background: black; margin: 0; padding: 0; height: 115px; float: left; transition: all 0.3s ease-out; cursor: pointer; } two { margin: 0; padding: 0; float: left; width: 200px; background-color: gray; height: 115px; margin-left: 0px; display: block; } three { margin: 0; padding: 0; float: left; width: 200px; background-color: black; height: 115px; margin-left: 0px; display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <footer> <one id="one" data-clicks="true"> <p unselectable="on"></p> </one> <two id="two" data-clicks="true"> <p unselectable="on"></p> </two> <three-info></three-info> <three id="three" data-clicks="true"> <p unselectable="on"></p> </three> </footer>