添加HTML基於Toggle Jquery

我有一個切換，只是爲我正在上班的課程。我需要添加隱藏的HTML基於切換狀態..基本上它需要提交與按鈕狀態的形式..這將是最好的方式來抓住它？我也張貼表格。添加HTML基於Toggle Jquery

這裏是我..當我按一下按鈕，它增加了實例文本，但我需要它去走，當我再次點擊..

$(document).ready(function() { 

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

});

來源

2012-07-23 greycode

請問你是否更加徹底，關於你正在努力完成什麼，還包括你的html？ – 2012-07-23 18:29:04

@JoshMein當我點擊按鈕....它添加在HTML（無所謂它是什麼。）當我再次單擊它時，它將其刪除，等等。 – greycode 2012-07-23 18:33:43

buttons_secondary從哪裏來？我看了你以前的問題，並試圖理解你正在嘗試做什麼的全貌。在我看來，你正在讓它變得更加困難。 – 2012-07-23 18:43:09

您可以刪除追加HTML通過ID或類，像這樣：根據註銷以前的問題的

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

來源

2012-07-23 18:37:51

哇@JoshMein，這太棒了！只有一個小問題。第三次點擊後，它完全刪除icon84/85類。一旦我再次點擊它，它就會回來。 – greycode 2012-07-23 19:11:08

看起來像增加了兩個類，然後關閉一個，然後關閉，然後重複。 – greycode 2012-07-23 19:12:55

toggleClass（）交換類。如果icon84是原始圖標，則用icon85交換圖標，反之亦然 – 2012-07-23 19:49:07

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

});

來源

2012-07-23 19:38:47 greycode

這是行得通的。 – greycode 2012-07-23 19:39:04

爲什麼不試試toggleClass而不是打兩個電話？ – 2012-07-24 12:10:02

添加HTML基於Toggle Jquery

回答

相關問題