Как переключить IMG удалить и добавить с помощью одной кнопки? - PullRequest
Новая
       41

Как переключить IMG удалить и добавить с помощью одной кнопки?

0 голосов
/ 14 мая 2019

Я пытаюсь создать кнопку, которая при нажатии вставляет изображение в виде элемента списка, а затем при повторном нажатии удаляет его из списка.

До сих пор я добился этого с помощью скрытия /Покажите метод, который великолепен.Но выполнение этого означает, что элемент все еще существует в DOM.

Я хотел бы полностью удалить изображение из DOM при нажатии, а затем повторно добавить то же изображение обратно в DOM при повторном нажатии..

Я смотрел на события jquery .remove, .append и .detach, но я изо всех сил пытаюсь это выяснить.Хотя я могу использовать эти методы для настройки абзацев, списков и элементов div, я не могу понять, как заставить одну конкретную кнопку захватить один конкретный элемент списка с определенным изображением в нем для достижения эффекта скрытия и показа.

Возможно, список не подходит для этого лучше, но это был мой первоначальный выбор для тестирования из-за его родительского UL.

Возможно ли это?Любое образование приветствуется. 

<div id=“toggletom”>this is my button</div>

<ul>
<li id="tomato"><img src="tomato.jpg"></li>
</ul>

<script>
$( "#toggletom" ).click(function() {
 $( "li" ).remove( ":contains('img src=tomato.jpg')" );
});
</script>

Ответы [ 2 ]

0 голосов
/ 18 мая 2019

спасибо @twisty, это была огромная помощь. Хотя я мог корректировать код, который вы предоставили, для достижения моей цели, это был не тот метод, который я имел в виду. Теперь я понимаю, что объект должен прийти откуда-то.

Я использовал jquery, чтобы при нажатии одной кнопки он проверял, есть ли элемент списка с идентификатором #tomato. Если есть, то удаляет, если нет, то добавляет.

Таким образом, одна кнопка удаления и добавления IMG решена. 

$(function() {
$(".addToms").click(function () {
    if ($("li").is('#tomato'))
       $("li").remove('#tomato');     
    else
        $("ul").prepend('<li class="centerUL" id="tomato"><img src="tomato.jpg"></li>');
    });
});

Как уже упоминалось в первом посте, здесь не используется стандартный метод скрытия / показа. Хотя в этом методе нет ничего плохого, цель здесь состояла в том, чтобы манипулировать DOM таким образом, чтобы несколько кнопок могли создать список изображений фруктов, заказанных пользователем, а не статический предварительно определенный список, в котором порядок остается тем же. но элементы скрыты и отображаются при клике.

0 голосов
/ 15 мая 2019

Существует множество способов сделать это.Вы упомянули о желании .remove() против .hide().Вы также хотите восстановить содержимое позже verus .show().

Рассмотрите следующий пример. 

$(function() {
  function saveHtml(item) {
    var h = item.prop("outerHTML");
    item.parent().data("lastChild", h);
  }

  function restoreLast(lObj) {
    var h = lObj.data("lastChild");
    if (h != undefined) {
      $(h).appendTo(lObj);
    }
  }

  function addTom(lObj) {
    var li = $("<li>", {
      id: "tomato-" + ($("li", lObj).length + 1),
      class: "image item"
    }).appendTo(lObj);
    $("<img>", {
      src: "https://i.imgur.com/ROLJaSi.jpg"
    }).appendTo(li);
  }

  function removeLast(lObj) {
    saveHtml($("li:last-child", lObj));
    $("li:last-child", lObj).remove();
  }

  $("#toggle-tomato").click(function() {
    var t = $(this).text();
    if (t.indexOf("Hide") >= 0) {
      // Action: Hide Last Tomato
      removeLast($("#image-list"));
      $(this).text("Show Last Tomato");
    } else {
      //Action: Show Last Tomato
      restoreLast($("#image-list"));
      $(this).text("Hide Last Tomato");
    }
  });

  $("#add-tomato").click(function() {
    addTom($("#image-list"));
  });
});
#image-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

#image-list .item {
  padding: .25em;
}

#image-list .image img {
  width: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="toggle-tomato">Hide Last Tomato</button> <button id="add-tomato">Add Tomato</button>

<ul id="image-list">
  <li id="tomato-1" class="image item"><img src="https://i.imgur.com/ROLJaSi.jpg"></li>
</ul>

Удаление объекта jQuery очень просто с помощью .remove().Если вы хотите вернуть что-то после того, как это будет удалено, вы должны знать, что это было.Это означает сохранение HTML или шаблона удаляемого элемента где-либо.Поскольку мы работаем со списком, мы можем просто заполнить его списком.Я использовал .data(), чтобы привязать его к родительскому элементу.

Вы можете адаптировать его для работы разными способами, так же как и в большинстве jQuery, вы хотите иметь функции Setter и Getter (Show / Hide).Поиграйте с ним и проверьте его в своем браузере.Вы увидите, что предмет удален из DOM, но возвращен обратно.Все с использованием одной и той же кнопки.

Предостережение : добавьте помидор, скройте его, добавьте еще один помидор и восстановите последний помидор.Что происходит?

Ничего серьезного, но у вас будет два элемента списка с id, которые tomato-2.Вы можете установить глобальную переменную, чтобы вести подсчет, и когда вы добавляете новую, используйте ее вместо числа элементов списка.

Надеюсь, это поможет.

...