一键切换两个容器

Question

所以我在 HTML 中内置了一个相当复杂的 div，与一些 PHP.

交织在一起

<div class="full-screen" >
    <p>
        <strong style="color: #296eaa;"> Description:</strong>
        <span data-value="1" id="description">&nbsp; <?php echo $locationDescription; ?> &nbsp; 
            <a href="#" class="pull-right edit-description" style="text-decoration:none; padding-left:10px;"><i class="fa fa-edit"> edit</i></a>
        </span>
    </p>                     
</div>

目前，我在两个位置为两种不同的页面布局（一种用于移动设备，一种用于其他方式）创建此 div。我有一个单击处理程序，用于在单击时在 div 上打开一个编辑器。

$('.edit-description').click(function(e) {
    e.stopPropagation();
    var contentContainer = $('#description');
    openEditor(contentContainer);
});

至于现在，点击处理程序仅附加到页面上的第一个 div（这是有道理的）。我确信这是一个有点普遍的问题，所以我只是想知道最好的方法是什么。

我希望处理程序在单击时打开两个容器，并且我的所有功能（如您所见，我正在 div 上打开一个编辑器）编辑 [=33= 的相同副本]，所以如果用户缩小他们的屏幕并且屏幕构造切换，编辑器保持打开状态，并且他们的编辑被保留。

注意：在 jQuery 中构建 div 不是一种选择，因为 div 相当复杂（为简洁起见，我删除了很多内容）。

有没有办法 'clone' div 使其行为与其他 div 匹配？

我的 openEditor() 函数只允许一次打开一个编辑器，方法是在所有以前打开的编辑器上使用 .hide()，但我怀疑有一种方法可以让它认为它们是同一个编辑器？

有没有办法构建一个 div 并使用 windowWidth() 函数在两个位置之间移动它？

衷心感谢您的帮助。非常感谢。

Answer 1

您可以在 $(window).resize()

上移动元素

将 class="toggle" 添加到两个跨度（为每个元素添加 id attribute unique）

...
<span class="toggle" data-value="1" id="description1">
...

更新点击事件处理程序中的选择器：

$('.edit-description').click(function(e) {
    e.stopPropagation();
    var contentContainer = $('.toggle:visible');
    openEditor(contentContainer);
});

添加调整大小事件处理程序：

// cache base elements:
var mobile = $('.mobile'), fullScreen = $('.full-screen');

$(window).resize(function(){
    if(mobile.is(':visible') && $('.edit-container').length){
        $('.edit-container').appendTo(mobile);
    }else if($('.edit-container').length){
        $('.edit-container').appendTo(fullScreen);
    }
});

JSFiddle

As for now, the click handler only attached to the first div on the page (which makes sense)

这是因为您的HTML在技术上是无效的。 id 属性必须是唯一的：W3.org。 jQuery只取给定id的第一个元素，其余id的元素不取。

一键切换两个容器

Toggle two containers with one click

html

javascript

css

jquery

responsive-design