使用 Jquery 一键移动对应的 div

Posted 2023-05-08

【中文标题】使用 Jquery 一键移动对应的 div

【英文标题】：Moving Corresponding Divs with a Single Click using Jquery

【发布时间】：2014-06-28 17:41:14

【问题描述】：

在 Main Wrapper 中，我有 5 个 Div。第一个 div 包含 4 个 Box(box_1, box_2,box_3,box_4) 我的点击事件将在其中发生。

main wrapper 里面的其他4个div，分别是box_1、box_2、box_3、box_4的内容。

当我点击我的第一个框时，点击事件应该动画第一个 div（向右滑动）并且 box_1 div 应该向右滑动。

这是我到目前为止所做的一个 JS 小提琴链接。

http://jsfiddle.net/swapnaranjita_nayak/8XcZX/

我只添加了 box_1 id 来向右滑动。我想为所有人编写一个通用代码。即如果我点击第二个框，第二个框从右边开始动画，如果我点击第三个框，第三个框应该从左边开始动画。

当我单击它们时，如何访问 4 个 Divs 的相应内容 div。注意：我已将一个单击事件附加到所有 4 个 div。

* 以上问题已解决** 新问题，

我已在每个 box_container 部分中添加回菜单 href 链接。单击此超链接后，我将再次返回菜单部分，并带有向右滑动的动画效果。菜单部分将通过左滑动画出现在窗口中。

下面的代码正在运行。

问题是当我单击任何框时，会出现相应的框容器。当我单击超链接选项“返回菜单”时，我什至返回到菜单部分。即4盒部分。问题从这里开始。如果我再次单击任何框，则移动到相应的框容器。点击超链接返回，菜单即 4 框部分刚刚从屏幕上消失。

注意：这次警报会出现两次。

html

<div class="main_wrapper" id="main_wrapper">
<div class="container_fluid" id="menu">
    <div class="wrapper">
        <div class="row">
            <div class="box1" id="box_1"></div>
            <div class="box2" id="box_2"></div> <div class="clear"></div>
        </div>

         <div class="row">
            <div class="box3" id="box_3"></div>
            <div class="box4" id="box_4"></div> <div class="clear"></div>
        </div>

    </div>
</div><!---End of Container fluid--->

 <div class="container_fluid" id="box_1_sec" style="display:none;margin-right:-170px;">
     <h1>Box1 Content</h1>
     <a href="#" id="back1">Back to #Menu</a>
</div>
     <div class="container_fluid" id="box_2_sec" style="display:none;margin-right:-170px;">
     <h1>Box2 Content</h1>
      <a href="#" id="back2">Back to #Menu</a>
</div>
 <div class="container_fluid" id="box_3_sec" style="display:none;margin-right:-170px;">
     <h1>Box3 Content</h1>
      <a href="#" id="back3">Back to #Menu</a>
</div>
 <div class="container_fluid" id="box_4_sec" style="display:none;margin-right:-170px;">
     <h1>Box4 Content</h1>
     <a href="#" id="back4">Back to #Menu</a>
</div>

CSS

 .container_fluid 
    width:100%;

.wrapper 
    width:1208px;
    margin:auto;

.row 
    padding:3% 3% 3% 3%;

.box1 
    height:100px;
    width:100px;
    background-color:red;
    margin-right:2%;
    float:left;

.box2 
    height:100px;
    width:100px;
    background-color:green;
    margin-right:2%;
    float:left;

.clear 
    clear:both;

.box3 
    height:100px;
    width:100px;
    background-color:black;
    margin-right:2%;
    float:left;

.box4 
    height:100px;
    width:100px;
    background-color:brown;
    margin-right:2%;
    float:left;

JQUERY

    $("#back1,#back2,#back3,#back4").click(function()
        alert($(this).attr('id'));
         $("#"+clicked_id+"_sec").animate(
            "marginRight":"-=170%"
         ,
          
            duration: 500,
            step: function() 
                console.log($(this).width());
            ,
            complete: function() 

                 $("#"+clicked_id+"_sec").hide()
                        menu.show();
                          menu.animate(
                            "marginLeft":"+=150%"
                         ,
                         
                            duration: 500,
                            step: function() 

                            ,
                            complete: function() 
                                 console.log("finished");
                            
                         );
            
         );
    );
);

【问题讨论】：

你的小提琴链接应该作为超链接给出，代码表明问题

嘿，我已经编辑了你的代码并添加了 Fiddle Demo 和 Code 并检查了这个***.com/help/how-to-ask

Thnx，Stack Exchange 新手 :) 你能帮帮我吗？

签出@morvy 的回答它有效

如果您将代码示例简化为必要的部分，这个问题可能会更漂亮。

【参考方案1】：

将您的 box_1_sec 替换为

$("#"+clicked_id+"_sec")

这样就可以了

【讨论】：

嗨，Morvy，我更改了一点代码。现在啮合了。看看我的小提琴吧。

var clicked_num=$(this).attr('id').replace(/[A-Za-z$-]/g, ""); $("#box_"+clicked_num) - 这将起作用（在第二个函数中），但您需要将这些函数分开并首先将菜单放在外面（因为您在两个函数中都需要它）