一键切换两个容器

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 上打开一个编辑器）来编辑 div 的相同副本，所以如果用户缩小他们的屏幕并屏幕构造切换，编辑器保持打开状态，并且保留其编辑。

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

有没有办法“克隆” div，使其行为与其他 div 匹配？

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

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

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

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

---

就目前而言，点击处理程序只附加到页面上的第一个 div（这是有道理的）

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