Javascript изменить содержание div на клик - PullRequest
Новая
       20

Javascript изменить содержание div на клик

1 голос
/ 03 мая 2011

Я извлекаю содержимое из массива 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...

Теперь, когда кто-то нажимает кнопку «Изменить» внутри, скажем, первого элемента div, где вес составляет 100 фунтов, мне просто нужноэто «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 с текстом ...

Спасибо, Питер

Ответы [ 3 ]

3 голосов
/ 03 мая 2011 
<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>
0 голосов
/ 03 мая 2011

Как насчет чего-то вроде:

Событие onClick вызывает функцию ( отредактировано, чтобы быть немного умнее , чем мой оригинальный метод грубой силы): 

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

Может ли это или подобная работа для вас? Или я пропускаю какое-то тонкое, но важное требование?

0 голосов
/ 03 мая 2011

То, что вы предлагаете, в основном правильно. Я бы сгенерировал два div один для отображения и один для редактирования. Div редактирования будет первоначально иметь display: none. Когда нажата кнопка «Редактировать», скройте отображаемый блок и отобразите блок редактирования.

...