Javascript 基于切换Jquery添加HTML

我有一个开关，它是为我即将开始工作的一个班级制作的。我需要根据切换状态添加隐藏的HTML。。基本上，它需要提交带有按钮状态的表单。。这是抓住它的最好方式吗？我也在张贴表格

这是我的。。当我单击按钮时，它会添加示例文本，但当我再次单击时，它会消失

 $(document).ready(function () { 

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

 });

$（文档）.ready（函数（）{
$（“.visibilitybutton”）。单击（函数（）{
$（本）
.toggleClass（“隐藏”）
.find（“span”）.toggleClass（“icon84 icon85”）
$（'.buttons_secondary'）。追加（“”）；
});
});

您可以删除通过id或类附加的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();

$（'.buttons_secondary'）。追加（''）；
//逐级删除
$（'.buttons_secondary'）。查找（'.hidden'）。删除（）；
//或按id删除
$（'.button_secondary'）。查找（'#hdf_Test'）。删除（）；

根据你之前的问题，我认为你应该试试这个：

$(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();
    });
 });

$（文档）.ready（函数（）{
$（'.button'）.toggle（函数（）{
var$按钮=$（此按钮）；
$button.prop（“标题”、“不可见”）；
$button.find（'.icon85'）.toggleClass（'icon85-icon84'）；
$（'.buttons_secondary'）。追加（''）；
}，函数（）{
var$按钮=$（此按钮）；
$button.prop（“标题”、“可见”）；
$button.find（'.icon85'）.toggleClass（'icon84-icon85'）；
//逐级删除
$（'.buttons_secondary'）。查找（'.hidden'）。删除（）；
//或按id删除
$（'.button_secondary'）。查找（'#hdf_Test'）。删除（）；
});
});

$（文档）.ready（函数（）{
$（'.visibilitybutton'）。切换（函数（）{
var$按钮=$（此按钮）；
$button.prop（“标题”、“不可见”）；
$button.find（'span'）.removeClass（'icon84'）.addClass（'icon85'）；
$（'.buttons_secondary'）。追加（''）；
}，函数（）{
var$按钮=$（此按钮）；
$button.prop（“标题”、“可见”）；
$button.find（'span'）.removeClass（'icon85'）.addClass（'icon84'）；
//或按id删除
$（'.buttons_secondary'）。查找（'#可见性设置'）。删除（）；
});
});

能否请您更彻底地了解一下您要完成的任务，并将您的html包含在内？@JoshMein当我单击按钮时。。。。它在html中添加（不管它是什么）当我再次单击它时，它会删除它，依此类推。按钮从何而来？我看了你之前的问题，我试图了解你试图做什么的全貌。在我看来，你正在使它变得更加困难。@JoshMein button secondary是我想要附加HTML的地方。哇@JoshMein，这太棒了！只有一个小问题。第三次单击后，它将完全删除icon84/85类。一旦我再次单击它，它就会返回。看起来它添加了两个类，然后删除一个，然后删除两个，然后重复。toggleClass（）交换这些类。如果icon84是原始版本，它将与icon85交换，反之亦然，为什么不尝试切换类而不是进行两次调用？

 $(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();
    });

 });