点击后Javascript会改变div的内容 [英] Javascript change div content upon a click

问题描述

 < div class =重显示> 
< span> 04/25/2011< / span> <跨度>百磅< /跨度> <跨度>编辑< /跨度> < a href =http://foo.com>删除< / span> 
< / div> 
< div class =weight-display> 
< span> 04/27/2011< / span> <跨度> 150磅< /跨度> <跨度>编辑< /跨度> < a href =http://foo.com>删除< / span> 
< / div> 
等... 
  

现在，当有人点击Edit时，在那里体重是100磅，我只需要那个div来改变，并有输入字段，而不是简单的文本，其中重量是（而其他人将保持不变），并像这样：

 < div class =weight-display> 
< span> 04/25/2011< / span> < input type =textvalue =100/> <跨度>保存< /跨度> <跨度>取消< /跨度> 
< / div> 
< div class =weight-display> 
< span> 04/27/2011< / span> <跨度> 150磅< /跨度> <跨度>编辑< /跨度> < a href =http://foo.com>删除< / span> 
< / div> 
等。
  

所以基本上div必须重新加载并更改内容。现在我真的需要一些非常简单的Javascript解决方案。最好我想要一个带有隐藏div的解决方案，因此当用户点击EDIT时，它们只是交换位置，并且如果按下CANCEL来再次交换位置，所以显示带有文本的原始div ...

谢谢，
Peter

解决方案

 < style type =text / css> 
 / *正常模式* / 
 .weight-display div.edit {display：none} 
 / *编辑模式* / 
 .weight-edit div.show {display：无} 
< / style> 
< div class =weight-display> 
< button onclick =toggle（this）>编辑此！< / button> 
< div class =edit>< input type =textvalue =Test/>< / div> 
< div class =show> Test< / div> 
< / div> 
< script type =text / javascript> 
函数切换（按钮）
 {
 //更改按钮标题
 button.innerHTML = button.innerHTML =='编辑此！'？ '取消'：'编辑这个！'; 
 //更改父div的CSS类
 var div = button.parentNode; 
 div.className = div.className =='weight-display'？ '体重编辑'：'体重显示'; 
} 
< / script> 
  

I'm pulling a content from PHP array and I have a situation like this:

 <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...

Now when somebody clicks on Edit within, let's say, first div where weight is 100lbs, I just need that "div" to change and to have input field instead of simple text where weight is (while others will remain the same) and to be like this:

<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..

So basically div has to "reload itself" and change content. Now I really need some very simple Javascript solution. Preferably I would like a solution with a hidden div beneath original one, so they just swap places when user clicks on EDIT and in a case if CANCEL is pressed to swap places again so original div with text is displayed...

Thanks, Peter

解决方案

<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>

这篇关于点击后Javascript会改变div的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！