如何使用一个按钮切换 IMG 删除和附加？

Posted 2023-05-09

【中文标题】如何使用一个按钮切换 IMG 删除和附加？

【英文标题】：How to toggle IMG remove and append using one button?

【发布时间】：2019-10-01 21:05:19

【问题描述】：

我正在尝试创建一个按钮，单击该按钮时，将图像作为列表项插入，然后再次单击时将其从列表中删除。

到目前为止，我已经使用很好的隐藏/显示方法实现了这一点。但是这样做意味着该元素仍然存在于 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>

【问题讨论】：

这是 100% 可能的，但是我们需要查看您的代码以帮助您调试它。

谢谢 Rory，我刚刚添加了我的测试代码。我认为语法是错误的。我考虑过的一种替代方法是在 div 上使用 onclick 并调用该函数。但非常感谢任何帮助。我真的很想了解它。

修正您在id=“toggletom” 中使用的引号。为什么需要将图像完全删除然后重新添加到 DOM？

@Littlemug 你能做一个操作吗？我的意思是你可以只删除还是只追加？

一旦删除，你怎么知道要添加什么图像？如果您无论如何要添加相同的图像，为什么不只是隐藏和显示。您不会通过删除和添加图像来保存任何内容，因为您必须将图像存储在某处以供参考以添加回。

【参考方案1】：

有很多方法可以做到这一点。你提到想要.remove() 与.hide()。您还想稍后恢复内容与.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>

使用.remove() 删除一个jQuery 对象非常简单。如果您想在移除某些东西后将其放回原处，则必须知道那是什么。这意味着将要删除的元素的 HTML 或模板存储在某个地方。由于我们正在使用列表，因此我们可以将其与列表一起填充。我使用.data() 将其附加到父元素上。

您可以调整它以通过多种方式工作，就像许多 jQuery 一样，您希望拥有一个 Setter 和 Getter 函数（显示/隐藏）。使用它并在浏览器中检查它。您将看到该项目已从 DOM 中移除，但又被放回原处。都使用同一个按钮。

警告：添加一个番茄，将其隐藏，添加另一个番茄，然后恢复最后一个番茄。会发生什么？

没什么大不了的，但是您将有两个带有id 的列表项tomato-2。您可以建立一个全局变量来保持计数，当您添加一个新变量时，使用它来代替列表项的计数。

希望对您有所帮助。

【讨论】：

谢谢，这是一个巨大的帮助。很好的例子，虽然我已经用不同的方法工作了。

【参考方案2】：

感谢@twisty，这是一个巨大的帮助。虽然我可以调整你提供的代码来实现我的目标，但这不是我想到的方法。我现在明白该对象需要来自某个地方。

我使用 jquery，以便在单击单个按钮时，它会检查是否有 ID 为 #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，使多个按钮可以创建用户订购的水果图像列表，而不是顺序保持不变的静态预定列表但元素被隐藏并在点击时显示。