当使用 if 语句按下一个链接时，尝试暂时禁用所有链接（即如果 div 在 left:650px 和 0px 之间，则禁用所有链接）

Question

我试图在 jQuery 中声明以下内容：如果 'LinkedDiv1' 或 'LinkedDiv2' 或 'LinkedDiv3' 或 'LinkedDiv4' 中的任何一个介于 left:0 和 left:650，那么所有 link（'Link1'、'Link2'、'Link3' 和 'Link4'）都应该关闭。

这样一来，一旦我按下任何一个 link，我就无法同时激活另一个 link。由于每个 link 都会导致 div 从右侧 (left:650px) 移动到屏幕 (left:0px)；这个想法是，如果任何 LinkedDiv 不是 650px 或 0px，那是因为它必须移动，因此已被相关 link.

激活

我尝试了以下方法，但似乎不起作用：

if (!$('#linkedDiv1').css('left') == '0px' && !$('#linkedDiv1').css('left') == '650px'){
    $(".links").off('click'); 
    } 

else if (!$('#linkedDiv2').css('left') == '0px' && !$('#linkedDiv2').css('left') == '650px'){
    $(".links").off('click'); 
    } 

else if (!$('#linkedDiv3').css('left') == '0px' && !$('#linkedDiv3').css('left') == '650px'){
    $(".links").off('click'); 
    } 

else if (!$('#linkedDiv4').css('left') == '0px' && !$('#LinkedDiv4').css('left') == '650px'){
    $(".links").off('click'); 
    }

这里是fiddle的代码（LinkedDiv1对应#rightContentService；LinkedDiv2对应#rightContentSweaters；LinkedDiv3对应#rightContentContact；LinkedDiv4对应#rightContentSeamstress）-

全屏：https://jsfiddle.net/8eah0fvm/1/embedded/result/ Fiddle: https://jsfiddle.net/8eah0fvm/1/

尽管暂时停用其他 link 可以更好地解决我的问题（目前我可以一次按下多个 link）；看看为什么我提出的解决方案不起作用也会很有趣。

Answer 1

尝试减少到单个 click 处理程序，使用选择器 $("li[id]")，.is() 和 :animated 选择器调用 .animate() if div 元素以 "rightContent" 开头的 id 当前没有动画

  $("li[id]").click(function () {
    var id = this.id.replace(/link/, "")
    , elems = $("div[id^=rightContent]");
    if (!elems.is(":animated")) {
        elems
        .filter(function (i, el) {
          return $(el).css("left") === "0px" && !new RegExp(id).test(el.id)
        })
        .animate({
          left: 650
        }, 1000)
        .siblings("[id$=" + id + "]")
        .delay(1000)
        .animate({
          left: "0px",
        }, 1000)
    }
  })

jsfiddle 没有 .delay(1000) https://jsfiddle.net/8eah0fvm/5/ , https://jsfiddle.net/8eah0fvm/5/embedded/result/

和.delay(1000)https://jsfiddle.net/8eah0fvm/6/

Answer 2

我还将您的功能缩减为一个可重复使用的功能，但它需要向您的导航元素添加一些数据属性，并类向您的内容容器添加。通过取消绑定和重新绑定点击事件处理程序，您可以避免在动画期间点击导致问题。 https://jsfiddle.net/8eah0fvm/4/

HTML:

 <div id="wrapper">
        <div id="leftMenuBar">
            <div id="leftLogo">
                <p>
                    </br>MENDICATION CORPORATION</p>
                <p id="smallerText">Mendicants of fashion</p>
            </div>
            <div class="break"></div>
            <div id="leftLinks">
                <ul>
                    <li id="linkService" data-show="rightContentService" class="links">the SERVICE</li>
                    <li id="linkSweaters" data-show="rightContentSweaters" class="links">the SWEATERS</li>
                    <li id="linkSeamstress" data-show="rightContentSeamstress" class="links">the SEAMSTRESS</li>
                    <li id="linkContact" data-show="rightContentContact" class="links">CONTACT</li>
                </ul>
            </div>
            <div id="leftSpace"></div>
            <div id="leftCopyrightAndSocialMedia"></div>
        </div>


        <div id="rightContent">



            <div id="rightContentService" class="content-box">
            <h1>the SERVICE</h1>    
            </div>

            <div id="rightContentSweaters" class="content-box">
                <h1>the SWEATERS</h1>
            </div>

            <div id="rightContentSeamstress" class="content-box">
                <h1>the SEAMSTRESS</h1>
                </div>

            <div id="rightContentContact" class="content-box">
                <h1>CONTACT</h1>
                </div>


        </div>

    </div>

Javascript:

$(function(){
    $("#leftLinks li").bind('click', this, changeContent);
});

function changeContent(el){
    $("#leftLinks li").unbind('click', changeContent);
    var id = $(this).data('show');
    var $elem = $('#' + id);
    var shown = $('.content-box').filter(function(i, el){
        return $(el).position().left < 650;
    })[0];
    $(shown).animate({ left: "650px"}, 1000);
    $elem.delay(1000).animate({ left: '0px'}, 1000);
    setTimeout(function(){$('#leftLinks li').bind('click', this, changeContent)}, 2000); ;
}

当使用 if 语句按下一个链接时，尝试暂时禁用所有链接（即如果 div 在 left:650px 和 0px 之间，则禁用所有链接）

Attempting to disable all links temporarily when one linked pressed using if statement (i.e. if div between left:650px and 0px, disable all links)

css

syntax

jquery

onclick

hyperlink