javascript - 一键切换两个容器

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() 只允许一次打开一个编辑器，但我怀疑有一种方法可以让它认为它们是同一个编辑器？

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

真诚感谢您的帮助。非常感谢。

Answer 1

您可以移动 $(window).resize() 上的元素

将 class="toggle" 添加到两个 span(为每个元素制作 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 的元素不会被接受。