Question

所以我有一个相当复杂的div内置HTML，与一些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（这是有意义的）。我确信这是一个有点常见的问题，所以我只是想知道最好的方法是什么。

我更喜欢处理程序在点击时打开BOTH容器，以及我所有的功能（如你所见，我在div上打开一个编辑器）来编辑div的同一副本，所以如果用户缩小他们的屏幕并且屏幕构造切换，编辑器保持打开状态，并保留其编辑内容。

注意：在jQuery中构建div不是一个选项，因为div相当复杂（我为了简洁而省略了很多）。

有没有办法克隆＆＃39; div，所以它的行为与另一个div相匹配？

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

有没有办法构建一个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);
});

添加resize事件处理程序：

// 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的元素不会被接受。

只需单击一下即可切换两个容器

1 个答案: