Question

简要说明：需要切换鼠标右键单击的div的位置。类别为switch的最接近 div应该相互切换。

我的代码：

$(document).on("contextmenu","div", function(event) {
      
      var itm = event.target;
      
     // alert("right clicked");
      event.stopPropagation();
      this.clickedElement  = $(this);
      event.preventDefault();
      $(this.clickedElement).addClass('selecteddiv');
      $(".custom-menu4").show();
      
       $(".custom-menu4 li").unbind().click(function(){
       
       switch($(this).attr("data-action"))
   { 
      case "second":
       $(".custom-menu4").hide();
       $(".selecteddiv").removeClass('selecteddiv');
       break;
       
       case "first":
      // $('.click').find('.switch').eq(0).appendTo($('.row'));
         var $div = $(itm).closest('.switch');
  $div.next('.switch').after($div);
       break;
       
       
   }
       
       })
     
 
     // alert("add");
      });


$('.click').click(function (evt) {
  var $div = $(evt.target).first('.switch');
  $div.next('.switch').after($div);
});




/*    $(document).unbind().on("click", function(devent) {
      devent.stopPropagation();     $(".selecteddiv").removeClass('selecteddiv');
   
      alert("remove");
        
      });  
    */

 .selecteddiv {
    border: 1px solid rgb(180, 13, 172);
  }
  
  .custom-menu4 {
    display: none;
    
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click container-fluid" style="padding:20px" >

<div class="row">
<div class="switch col-sm-6 bg-primary">Hello</div> 
<div class="switch  col-sm-6 bg-secondary">World</div>
</div>

</div>

<br>

<br>


<div class="click container-fluid" style="padding:20px" >

<div class="row">
<div class="switch col-sm-6 bg-primary">Hello2</div> 
<div class="switch  col-sm-6 bg-secondary">World2</div>
</div>

</div>


<ul class='custom-menu4'>
    <li data-action = "first">Switch</li>
    <li data-action = "second">Cancel</li>
</ul>

当我单击上下文菜单中的“切换”按钮时，它们不会翻转，这在下面的代码行中有问题：

  var $div = $(evt.target).first('.switch');
  $div.next('.switch').after($div);

请指导。

Answer 1

问题在于，当您第一次右键单击上下文菜单时， itm 将是主要菜单，当再次单击时，切换菜单 itm 将保持不变。

我添加了一个条件来切换主要和次要问题。

请尝试使用此代码。

       $(document).on("contextmenu", "div", function (event) {
        var itm = event.target;
        var primary = itm;
        var toggle = true;
        // alert("right clicked");
        event.stopPropagation();
        this.clickedElement = $(this);
        event.preventDefault();
        $(this.clickedElement).addClass('selecteddiv');
        $(".custom-menu4").show();

        $(".custom-menu4 li").unbind().click(function () {

            switch ($(this).attr("data-action")) {
                case "second":
                    $(".custom-menu4").hide();
                    $(".selecteddiv").removeClass('selecteddiv');
                    break;

                case "first":
                    var $div;
                    if (toggle) {
                        // $('.click').find('.switch').eq(0).appendTo($('.row'));
                        toggle = false;
                        itm = primary;
                    } else {
                        itm = $(itm).prev('.switch');
                        toggle = true;
                    }
                    $div = $(itm).closest('.switch');
                    $div.next('.switch').after($div);

                    break;


            }

        })
    });

$('.click').click(function (evt) {
  var $div = $(evt.target).first('.switch');
  $div.next('.switch').after($div);
});




/*    $(document).unbind().on("click", function(devent) {
      devent.stopPropagation();     $(".selecteddiv").removeClass('selecteddiv');
   
      alert("remove");
        
      });  
    */

 .selecteddiv {
    border: 1px solid rgb(180, 13, 172);
  }
  
  .custom-menu4 {
    display: none;
    
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click container-fluid" style="padding:20px" >

<div class="row">
<div class="switch col-sm-6 bg-primary">Hello</div> 
<div class="switch  col-sm-6 bg-secondary">World</div>
</div>

</div>

<br>

<br>


<div class="click container-fluid" style="padding:20px" >

<div class="row">
<div class="switch col-sm-6 bg-primary">Hello2</div> 
<div class="switch  col-sm-6 bg-secondary">World2</div>
</div>

</div>


<ul class='custom-menu4'>
    <li data-action = "first">Switch</li>
    <li data-action = "second">Cancel</li>
</ul>

Answer 2

此：需要切换鼠标右键单击的div的位置。具有类切换功能的最接近的div应该彼此切换。

您不只是有一个理由吗？

正如您所说的那样。

$(document).on("contextmenu", "div", function(evt) {
  evt.preventDefault();
  var $div = $(evt.target).parent().children().first('.switch');
  $div.next('.switch').after($div);

});

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div class="click container-fluid" style="padding:20px">

    <div class="row">
      <div class="switch col-sm-6 bg-primary">Hello</div>
      <div class="switch  col-sm-6 bg-secondary">World</div>
    </div>

  </div>


</body>

</html>

切换最近的div位置

2 个答案: