javascript - 基于 Toggle Jquery 添加 HTML

Question

我有一个刚刚为我要上班的课程制作的切换开关。我需要根据切换状态添加隐藏的 HTML。基本上它需要提交带有按钮状态的表单。这是获取它的最佳方式吗？我也在张贴表格。

这就是我所拥有的..当我单击按钮时，它会添加示例文本，但是当我再次单击时我需要它消失..

 $(document).ready(function () { 

    $(".visibilitybutton").click(function(){
        $(this)
            .toggleClass("hide")
            .find("span").toggleClass("icon84 icon85")
            $('.buttons_secondary').append("<input type='hidden'>");
    });

 });

Answer 1

您可以像这样删除通过 id 或 class 附加的 html：

$('.buttons_secondary').append('<input id="hdf_Test" class="hidden" type="hidden" />');

// Remove by class
$('.buttons_secondary').find('.hidden').remove();

// OR Remove by id
$('.buttons_secondary').find('#hdf_Test').remove();

根据您之前的问题，我认为您应该尝试以下操作：

$(document).ready(function () { 
    $('.button').toggle(function() {
          var $button = $(this);

          $button.prop("title","Invisible");
          $button.find('.icon85').toggleClass('icon85 icon84');
          $('.buttons_secondary').append('<input id="hdf_Test" class="hidden" type="hidden" />');
    }, function() {
          var $button = $(this);

          $button.prop("title","Visible");
          $button.find('.icon85').toggleClass('icon84 icon85');

          // Remove by class
          $('.buttons_secondary').find('.hidden').remove();

          // OR Remove by id
          $('.buttons_secondary').find('#hdf_Test').remove();
    });
 });

Answer 2

 $(document).ready(function () { 

     $('.visibilitybutton').toggle(function() {
          var $button = $(this);

          $button.prop("title","Invisible");
          $button.find('span').removeClass('icon84').addClass('icon85');
          $('.buttons_secondary').append('<input id="visibility_setting" class="hidden" type="hidden" />');
    }, function() {
          var $button = $(this);

          $button.prop("title","Visible");
          $button.find('span').removeClass('icon85').addClass('icon84');

          // OR Remove by id
          $('.buttons_secondary').find('#visibility_setting').remove();
    });

 });