禁用第一个子div中的按钮 [英] Disable a button in the first child div

查看：115
本文介绍了禁用第一个子div中的按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述



然而，第一个div是div的第一个子元素。容器应该禁用'left'和'top'按钮。

我试图通过找到第一个孩子并将其中的按钮属性更改为禁用来实现此目的。但是，当我交换第一个孩子时，这会丢失并且不会保留在新的第一个孩子身上。



以下是代码。 

 < html> 
< head> 
< style> 
 .box {
 height：25％; 
宽度：45％; 
填充：1％; 
保证金余额：1％; 
 margin-top：1％; 
 border：1px纯黑色; 
 float：left; 
 
} 
 
 .disabled-btn {
 cursor：not-allowed; 
不透明度：0.25％; 
} 
 
< / style> 
< script src =https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js>< / script> 
< / head> 
< body> 
< div class =container> 
< div class =boxid =one> 
< p> one< / p> 
< button class =right>用右手交换！< /按钮> 
< button class =left>用左手交换！< /按钮> 
< button class =top>与顶部交换！< /按钮> 
< button class =down>与向下交换！< / button> 
< / div> 
 
< div class =boxid =two> 
< p> two< / p> 
< button class =right>用右手交换！< /按钮> 
< button class =left>用左手交换！< /按钮> 
< button class =top>与顶部交换！< /按钮> 
< button class =down>与向下交换！< / button> 
< / div> 
 
< div class =boxid =three> 
< p>三< / p> 
< button class =right>用右手交换！< /按钮> 
< button class =left>用左手交换！< /按钮> 
< button class =top>与顶部交换！< /按钮> 
< button class =down>与向下交换！< / button> 
 
< / div> 
 
< div class =boxid =four> 
< p> four< / p> 
< button class =right>用右手交换！< /按钮> 
< button class =left>用左手交换！< /按钮> 
< button class =top>与顶部交换！< /按钮> 
< button class =down>与向下交换！< / button> 
< / div> 
< / div> 
< script> 
 $（document）.ready（function（）{
 resetEvents（）; 
} 
 
函数resertEvents（）{
 
 $ （'.right'）。unbind（'click'）; 
 $（'。left'）。unbind（'click'）; 
 $（'。top'）。unbind（'click' ）; 
 $（'。down'）。unbind（'click'）; 
 
 $ b $（'。right'）。click（function（）{
 // alert（'ok'）; 
 var toMove1 = $（this）.parents（'。box'）; 
 // toMove2 = toMove1.next（）; 
 
 $（toMove1）.insertAfter（$（toMove1）.next（））; 
}）; 
 
 $（'。left'）。click（function（）{
 // alert（'ok'）; 
 var toMove1 = $（this）.parents（'。box'）; 
 // toMove2 = toMove1.prev（）; 
 
 $（toMove1）.insertBefore（$（toMove1）.prev（））; 
}）; $（'。'）; 
 $（'。down'）。click（function（）{
 // alert（'ok'）; 
 var toMove1 = $（this）.parents（' （）; 
 var middle = $（toMove1）.next（）; 
 var toMove2 = $（middle）.next（）; 
 $ b $ toMove2 = $（toMove1 ）.insertAfter（$（middle）.next（））; 
 
 var middle = $（toMove2）.prev（）; 
 // alert（middle）; 
 middle = $（middle）.insertBefore（$（middle）.prev（））; 
 
 // toMove2 = toMove1.prev（）; 
 
 // $（toMove1） .insertBefore（$（toMove1）.prev（））; 
}）; $（'。top'）。click（function（）{
 // alert（'ok'）; 
 var toMove1 = $（this）.parents（' 。）; 
 var middle = $（toMove1）.prev（）; 
 var toMove2 = $（middle）.prev（）; 
 
 toMove2 = $（toMove1 ）.insertBefore（$（middle）.prev（））; 
 
 var middle = $（toMove2）.next（）; 
 // alert（middle）; 
 middle = $（middle）.insertAfter（$（middle）.next（））; 
 
 // toMove2 = toMove1.prev（）; 
 $ b $ //（toMove1） .insertBefore（$（toMove1）.prev（））; 
}）; 
 
 
 
 
 
 
 $ b var firstChild = $（'。container'）。children（）。first（ ）; 
 var lastChild = $（'。container'）。children（）。last（）; 
 resetChild（firstChild，lastChild）; 
 
 
}）; 
 
函数resetChild（first，last）{
 var firstChild = $（'。container'）。children（）。first（）; 
 //console.log(firstChild）; 
 if（firstChild）{
 //$(firstChild).find('.left').prop('disabled'，true）; 
 $（firstChild）.find（'。left'）。addClass（disabled-btn）; 
} 
 
 var lastChild = $（'。container'）。children（）。last（）; 
 if（lastChild）{
 $（lastChild）.find（'。right'）。prop（'disabled'，true）; 
} 
} 
< / script> 
< / body> 
< / html>

新增小提琴。

解决方案

所以，我经历了你的逻辑并修改了一些方面你的代码变得更好。附加的代码是您发布内容的改进版。



我创建了一个函数 handleEvents（），它应该在重置布局和两个div交换时处理所有的禁用按钮属性。这个方法必须基本上调用所有div的交换来在按钮上呈现新的禁用的属性。



这个函数看起来像这样： 

 函数handleEvents（）{
 $（。top，.left，。 down，.right）。prop（disabled，false）; 
 $ b $（。container .box：first-child）。find（。top，.left）。prop（disabled，true）; 
 $（。container.box：nth-​​child（2））。find（。top，.right）。prop（disabled，true）; 
 $（。container .box：nth-​​child（3））。find（。down，.left）。prop（disabled，true）; 
 $（。container.box：nth-​​child（4））。find（。down，.right）。prop（disabled，true）; 
}

检查此小提琴。



.box {height：25％;宽度：45％;填充：1％;余量：1％;利润率：1％;边框：1px纯黑色; float：left;}。disabled-btn {cursor：not-allowed; opacity：0.25％;}

< script src = https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js\"></script><body> < div class =container> < div class =boxid =one> < p为H.一个< / p为H. < button class =right>用右手交换！< /按钮> < button class =left>用左手交换！< / button> < button class =top>与顶部交换！< /按钮> < button class =down>与向下交换！< / button> < / DIV> < div class =boxid =two> < p为H. 2< / p为H. < button class =right>用右手交换！< /按钮> < button class =left>用左手交换！< / button> < button class =top>与顶部交换！< /按钮> < button class =down>与向下交换！< / button> < / DIV> < div class =boxid =three> < p为H. 3< / p为H. < button class =right>用右手交换！< /按钮> < button class =left>用左手交换！< / button> < button class =top>与顶部交换！< /按钮> < button class =down>与向下交换！< / button> < / DIV> < div class =boxid =four> < p为H. 4< / p为H. < button class =right>用右手交换！< /按钮> < button class =left>用左手交换！< / button> < button class =top>与顶部交换！< /按钮> < button class =down>与向下交换！< / button> < / DIV> < / body>


I've tried to create a simple application to swap divs on clicking the respective buttons.

However, the first div which is the first-child of div.container should have 'left' and 'top' button disabled.

I've tried to achieve this by finding the first child and changing the property of the button inside it to disabled. But this is lost and is not retained on the new first child when I swap the first-child.

Here's the code.

<html>
    <head>
        <style>
            .box {
                height: 25%;
                width: 45%;
                padding: 1%;
                margin-left: 1%;    
                margin-top: 1%;
                border: 1px solid black;
                float: left;

            }

            .disabled-btn {
                cursor: not-allowed;
                opacity: 0.25%;
            }

        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="box" id="one">
                <p>one</p>
                <button class="right">Swap with right!</button>
                <button class="left">Swap with left!</button>
                <button class="top">Swap with top!</button>
                <button class="down">Swap with down!</button>
            </div>

            <div class="box" id="two">
                <p>two</p>
                <button class="right">Swap with right!</button>
                <button class="left">Swap with left!</button>
                <button class="top">Swap with top!</button>
                <button class="down">Swap with down!</button>
            </div>

            <div class="box" id="three">
                <p>three</p>
                <button class="right">Swap with right!</button>
                <button class="left">Swap with left!</button>
                <button class="top">Swap with top!</button>
                <button class="down">Swap with down!</button>

            </div>

            <div class="box" id="four">
                <p>four</p>
                <button class="right">Swap with right!</button>
                <button class="left">Swap with left!</button>
                <button class="top">Swap with top!</button>
                <button class="down">Swap with down!</button>
            </div>
        </div>
        <script>
            $(document).ready(function() {
                resetEvents();
            }

                function resertEvents() {

                    $('.right').unbind('click');
                    $('.left').unbind('click');
                    $('.top').unbind('click');
                    $('.down').unbind('click');


                    $('.right').click(function(){
                    //alert('ok');
                    var toMove1 = $(this).parents('.box');
                    //toMove2 = toMove1.next();

                    $(toMove1).insertAfter($(toMove1).next());
                    });

                    $('.left').click(function(){
                        //alert('ok');
                        var toMove1 = $(this).parents('.box');
                        //toMove2 = toMove1.prev();

                        $(toMove1).insertBefore($(toMove1).prev());
                    });

                    $('.down').click(function(){
                        //alert('ok');
                        var toMove1 = $(this).parents('.box');
                        var middle = $(toMove1).next();
                        var toMove2 = $(middle).next();

                        toMove2 = $(toMove1).insertAfter($(middle).next());

                        var middle = $(toMove2).prev();
                        //alert(middle);
                        middle = $(middle).insertBefore($(middle).prev());

                        //toMove2 = toMove1.prev();

                        //$(toMove1).insertBefore($(toMove1).prev());
                    });

                    $('.top').click(function(){
                        //alert('ok');
                        var toMove1 = $(this).parents('.box');
                        var middle = $(toMove1).prev();
                        var toMove2 = $(middle).prev();

                        toMove2 = $(toMove1).insertBefore($(middle).prev());

                        var middle = $(toMove2).next();
                        //alert(middle);
                        middle = $(middle).insertAfter($(middle).next());

                        //toMove2 = toMove1.prev();

                        //$(toMove1).insertBefore($(toMove1).prev());
                    });

                }





            var firstChild = $('.container').children().first();
            var lastChild = $('.container').children().last();
            resetChild(firstChild, lastChild);


            });

            function resetChild(first, last) {
                var firstChild = $('.container').children().first();
                //console.log(firstChild);
                if(firstChild){
                    //$(firstChild).find('.left').prop('disabled', true);
                    $(firstChild).find('.left').addClass(disabled-btn);
                }

                var lastChild = $('.container').children().last();
                if(lastChild){
                    $(lastChild).find('.right').prop('disabled', true);
                }
            }
        </script>
    </body>
</html>

Added fiddle.

解决方案

So, I went through your logic and modified and changed some aspect of your code for the better. The attached code is an improved version of what you have posted.

I created a function handleEvents() which should handle all your disable button properties on resetting of the layout and when two divs are swapped. This method has to be basically called on the swapping of all divs to render the new disabled properties on the buttons.

The function looks like this:

  function handleEvents() {
    $(".top, .left, .down, .right").prop("disabled", false);

    $(".container .box:first-child").find(".top, .left").prop("disabled", true);
    $(".container .box:nth-child(2)").find(".top, .right").prop("disabled", true);
    $(".container .box:nth-child(3)").find(".down, .left").prop("disabled", true);
    $(".container .box:nth-child(4)").find(".down, .right").prop("disabled", true);
  }

Check updated solution in this fiddle.

Refer the working solution here:

$(document).ready(function() {
  resetEvents();

  function handleEvents() {
    $(".top, .left, .down, .right").prop("disabled", false);

    $(".container .box:first-child").find(".top, .left").prop("disabled", true);
    $(".container .box:nth-child(2)").find(".top, .right").prop("disabled", true);
    $(".container .box:nth-child(3)").find(".down, .left").prop("disabled", true);
    $(".container .box:nth-child(4)").find(".down, .right").prop("disabled", true);
  }


  function resetEvents() {

    $(".top, .left, .down, .right").unbind('click');

    handleEvents();

    $('.right').click(function() {
      var toMove1 = $(this).parents('.box');

      $(toMove1).insertAfter($(toMove1).next());
      handleEvents();
    });

    $('.left').click(function() {
      var toMove1 = $(this).parents('.box');

      $(toMove1).insertBefore($(toMove1).prev());
      handleEvents();
    });

    $('.down').click(function() {
      var toMove1 = $(this).parents('.box');
      var middle = $(toMove1).next();
      var toMove2 = $(middle).next();

      toMove2 = $(toMove1).insertAfter($(middle).next());

      var middle = $(toMove2).prev();
      middle = $(middle).insertBefore($(middle).prev());
      handleEvents();
    });

    $('.top').click(function() {
      var toMove1 = $(this).parents('.box');
      var middle = $(toMove1).prev();
      var toMove2 = $(middle).prev();

      toMove2 = $(toMove1).insertBefore($(middle).prev());

      var middle = $(toMove2).next();
      middle = $(middle).insertAfter($(middle).next());
      handleEvents();
    });
  }
});

.box {
  height: 25%;
  width: 45%;
  padding: 1%;
  margin-left: 1%;
  margin-top: 1%;
  border: 1px solid black;
  float: left;
}

.disabled-btn {
  cursor: not-allowed;
  opacity: 0.25%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>

<body>
  <div class="container">
    <div class="box" id="one">
      <p>one</p>
      <button class="right">Swap with right!</button>
      <button class="left">Swap with left!</button>
      <button class="top">Swap with top!</button>
      <button class="down">Swap with down!</button>
    </div>

    <div class="box" id="two">
      <p>two</p>
      <button class="right">Swap with right!</button>
      <button class="left">Swap with left!</button>
      <button class="top">Swap with top!</button>
      <button class="down">Swap with down!</button>
    </div>

    <div class="box" id="three">
      <p>three</p>
      <button class="right">Swap with right!</button>
      <button class="left">Swap with left!</button>
      <button class="top">Swap with top!</button>
      <button class="down">Swap with down!</button>

    </div>

    <div class="box" id="four">
      <p>four</p>
      <button class="right">Swap with right!</button>
      <button class="left">Swap with left!</button>
      <button class="top">Swap with top!</button>
      <button class="down">Swap with down!</button>
    </div>
  </div>

</body>

这篇关于禁用第一个子div中的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆