如何在单个视图+ cakephp中多次使用元素

Question

我有一个观点和一个元素。在我的cakephp代码中，我在我的视图中第一次使用该元素，它按预期工作。但我希望在相同的视图形式中使用相同的元素，并且它根本不工作。 这是我的观点：

<div class="add form">
<?php echo $this->Form->create('add name', array('class'=>'form-horizontal'));?>
<fieldset>
<legend>
<?php echo __('Add Name'); ?>
</legend>
<?php
echo $this->Form->input('name');
echo $this->Form->input('numeric_id');
echo $this->Form->input('parent_id', array('options' => $parents));
?>
<div>
<?php echo $this->element('editortoolbar'); ?>
<?php echo $this->Form->label('Your Description');?>
    <div id="editor" contenteditable=true></div>
</div>
<?php echo $this->Html->script('hotways'); ?>
<?php echo $this->Html->script('welsubs'); ?>
<?php echo $this->Html->script('application');?>
<?php echo $this->Form->hidden('description',array('id'=>'desc'));?>
<!-- == EDITOR END == -->
<hr>
</fieldset>
<?php echo $this->Form->button(__('Submit'), array('class'=>'btn btn-primary'));?>
<?php echo $this->Form->end();?>
</div>
<script>
    $('#editor').live('keyup',function () {
    var value = $(this).html();
    $('#desc').attr("value",value);
}).keyup();
</script>

现在这是我希望在同一表单中重复使用两次以代表另一种不同类型的代码的部分。

<?php echo $this->element('editortoolbar'); ?>
    <?php echo $this->Form->label('Your Description');?>
        <div id="editor" contenteditable=true></div>
    </div>
    <?php echo $this->Html->script('hotways'); ?>
    <?php echo $this->Html->script('welsubs'); ?>
    <?php echo $this->Html->script('application');?>
    <?php echo $this->Form->hidden('description',array('id'=>'desc'));?>

editortoolbar是我的元素，有各种按钮。这是代码的屏幕截图：

现在这个工具栏适用于所有具有id ='editor'的div。但在这种形式，我想使用此工具栏3 div。我没有采取任何办法来做到这一点。

任何想法或任何建议请帮助。

Answer 1

好吧，你将动作附加到一个id，而id显然只能将它放在一个元素上。

<script>
    $('#editor').live('keyup',function () {
        var value = $(this).html();
        $('#desc').attr("value",value);
    }).keyup();
</script>

这只适用于元素的一个实例。如果您打算使用多个元素，则需要以其他方式识别它们。我可以根据课程给你一个建议，但是你需要调整javascript执行的动作，具体取决于它应该做什么。

为元素添加类标识符

<?php echo $this->element('editortoolbar'); ?>
<?php echo $this->Form->label('Your Description');?>
    <!-- here, add the class -->
    <div class="editorclass" contenteditable=true></div>
</div>

并将脚本更改为

<script>
    $('.editorclass').live('keyup',function () {
        var value = $(this).html();
        $('#desc').attr("value",value);
    }).keyup();
</script>

现在，您有一个#desc引用也无效，因为它被id引用。所以你可以通过做同样的事情，改变类的id来解决这个问题，但是你需要找到一种方法来将该编辑器类与该描述保持在一起。我通常为这种情况做的是计算具有相同类的元素，识别被引用的元素的索引，并使用相同的索引修改另一个类（在本例中为描述）。在你的情况下，它将类似于

<script>
    $('.editorclass').live('keyup',function () {
        var value = $(this).html();
        $('.descclass').eq($('.editorclass').index($(this))).attr("value",value);
    }).keyup();
</script>

但是我没有测试过，所以你需要调整那个功能。哦，你还需要改变这个部分

<?php echo $this->Form->hidden('description',array('class'=>'descclass' ));?>