Question

我从PHP数组中提取内容，我有这样的情况：

 <div class="weight-display">
 <span>04/25/2011</span> <span>100lbs</span> <span>Edit</span> <a href="http://foo.com">Delete</span>
 </div>
 <div class="weight-display">
 <span>04/27/2011</span> <span>150lbs</span> <span>Edit</span> <a href="http://foo.com">Delete</span>
 </div>
 etc...

现在当有人点击Edit in时，让我们说，第一个div的权重是100lbs，我只需要改变“div”并输入字段而不是简单的文本，其中权重是（而其他人将保持不变）并且是这样的：

<div class="weight-display">
<span>04/25/2011</span> <input type="text" value="100" /> <span>Save</span> <span>Cancel</span>
</div>
<div class="weight-display">
<span>04/27/2011</span> <span>150lbs</span> <span>Edit</span> <a href="http://foo.com">Delete</span>
</div>
etc..

所以基本上div必须“重装自己”并改变内容。现在我真的需要一些非常简单的Javascript解决方案。最好我想要一个隐藏div在原始版本下面的解决方案，所以当用户点击EDIT时它们只是交换位置，如果按下CANCEL再次交换位置，那么显示带文本的原始div ...

谢谢，彼得

Answer 1

<style type="text/css">
    /* Normal mode */
    .weight-display div.edit {display:none}
    /* Editor mode */
    .weight-edit div.show {display:none}
</style>
<div class="weight-display">
    <button onclick="toggle(this)">Edit this!</button>
    <div class="edit"><input type="text" value="Test" /></div>
    <div class="show">Test</div>
</div>
<script type="text/javascript">
    function toggle(button)
    {
        // Change the button caption
        button.innerHTML = button.innerHTML=='Edit this!' ? 'Cancel' : 'Edit this!';
        // Change the parent div's CSS class
        var div = button.parentNode;
        div.className = div.className=='weight-display' ? 'weight-edit' : 'weight-display';
    }
</script>

Answer 2

你的建议基本上是正确的。我会生成两个div用于显示和一个编辑。编辑div最初将具有display: none。单击编辑时，隐藏显示div并显示编辑div。

Answer 3

如下：

onClick事件调用一个函数（ EDITED比我原来的强力方法更聪明）：

function swapdivs ( id_of_topdiv, id_of_bottomdiv ) {
  var topdiv    = getRefToDiv( id_of_topdiv );
  var bottomdiv = getRefToDiv( id_of_bottomdiv );

  var temp  = topdiv.style.zIndex;
  topdiv    = bottomdiv.style.zIndex;
  bottomdiv = temp.style.zIndex;
}

这个或类似的工作适合你吗？或者我错过了一些微妙但至关重要的要求？

Javascript在点击后更改div内容

3 个答案: