移动 DIV 禁用按钮 0px 左边距

Question

我有一个小问题。我正在尝试使用 jQuery 和一些 css/javascript 创建我自己的滑块。

我让我的滑块通过单击一个按钮来左右移动一个 660px 的 Div。

但是，当左边距为 0 时，我希望禁用右键。并且我希望整个 div 在单击几下后回退到 0px。

这可能吗？

这是我的代码：

<script language="javascript">
            function example_animate(px) {
                        $('#slide').animate({
                            'marginLeft' : px
                });
            }
        </script>
        <div class="container">
            <div class="row">
                <div class="contr-left">
                    <a type="button" value="Move Left" onclick="example_animate('-=600px')"><i class="fa fa-chevron-circle-left fa-2x" aria-hidden="true" ></i></a>
                </div>
                <div id="carreview" class="carousel" data-ride="carousel" style="opacity: 1; display: block;">
                    <div class="wrapper-outer">
                        <div class="wrapper-inner" id="slide">
                            <?php get_template_part('loop-reviews');?>
                        </div>
                    </div>
                    <div class="contr-right">
                        <a type="button" value="Move Right" onclick="example_animate('+=600px')"><i class="fa fa-chevron-circle-right fa-2x" aria-hidden="true" ></i></a>
                    </div>
                </div>
            </div> 
        </div>

我使用的代码来自这个页面：Page

好吧，使用来自 Rayn 的代码，我得到了隐藏按钮，但现在当左边距为 1px 或其他东西时它不会显示。所以我现在正在尝试这个：（顺便说一句不起作用）

我现在正在尝试这个：（顺便说一句不起作用）`function example_animate(px) {

                $('#slide').animate({
                    'marginLeft' : px
        });
       var slidemarginleft = $('#slide').css('margin-left'); //this gets the value of margin-left
       if(slidemarginleft == '0px'){
          $('.contr-right').hide();
      } else (slidemarginleft == '1px') {
            $('.contr-right').show();
         }
       }`

我还看到，margin-left 不是在样式表中设置的，而是在 <div style="margin-left:0px">content</div>

Answer 1

你可以在每次点击后做一个if语句来检查元素是否有0px

    function example_animate(px) {

                    $('#slide').animate({
                        'marginLeft' : px
            });
           var slidemarginleft = $('#slide').css('margin-left'); //this gets the value of margin-left
           if(slidemarginleft == '0px'){
              $('.contr-right').hide();
             }
           }

Answer 2

使用这个

function example_animate(px) {
                    $('#slide').animate({
                        'marginLeft' : px
            });
            if($('.xman').css("marginLeft")=='0px'){
                $('.contr-left').attr('disabled',true);
           }
        }

Answer 3

左边距时禁用按钮：0px

如果满足条件，您可以使用 jquery 的 .prop() 方法禁用按钮。这是一个例子（伪代码）：

function disableButton() {
 $(element).prop('disabled', true);
}
function checkMargin() {
if ($(element).css("margin") === 0) {
 disableButton()
}
}
checkMargin()

点击几下后回退到 0px

在这里，我只是设置点击次数，并在达到您想要的阈值时触发一个函数。伪代码：

var threshold = 5
var clicks = 0

$(element).click(function(){
clicks++
if (clicks === 5) {
rewind();
}
clicks - 5
})


function rewind() {
 $(element).css( "margin", "0" );
checkMargin()
}

Answer 4

这是我的工作代码，感谢所有帮助：

<script>
        function example_animate(px) {

                    $('#slide').animate({
                        'marginLeft' : px
            });
           var slidemarginleft = $('#slide').css('margin-left'); //this gets the value of margin-left
           if(slidemarginleft < '-3000px'){
              $('#slide').animate({marginLeft: '0px'}, 400);
             } 
           var hide = $('#slide').css('margin-left'); //this gets the value of margin-left
           if(hide >= '-50px'){
              $('.contr-left').addClass('showMe');
             }
           var hideMe = $('#slide').css('margin-left'); //this gets the value of margin-left
           if(hideMe <= '-50px'){
              $('.contr-left').removeClass('showMe');
             }
           }
</script>
<!-- /Review script -->

<section id="reviews">
    <div class="container">
        <div class="row">
            <div class="container">
                <div class="row">
                    <h4>Reviews</h4>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
            <div class="row">
                <div class="col-sm-1" style="width:40px;">
                    <div class="row">
                        <div class="contr-left">
                            <a type="button" value="Move Left" onclick="example_animate('+=510px')"><i class="fa fa-chevron-circle-left fa-2x" aria-hidden="true" ></i></a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-10">
                    <div class="row">
                        <div id="carreview" class="carousel" data-ride="carousel" style="opacity: 1; display: block;">
                            <div class="wrapper-outer">
                                <div class="wrapper-inner" id="slide" style="margin-left:0px;">
                                    <?php get_template_part('loop-reviews');?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-1" style="width:40px;">
                    <div class="row">
                        <div class="contr-right">
                            <a type="button" value="Move Right" onclick="example_animate('-=510px')"><i class="fa fa-chevron-circle-right fa-2x" aria-hidden="true" ></i></a>
                        </div>
                    </div>
                </div>
            </div>
            <a href="<?php site_url(); ?>/reviews"><div class="btn btn-06">Bekijk alle reviews</div></a>
        </div>
</section>