多個按鈕開關

我想要刪除當我單擊按鈕，編輯按鈕時，.widget框的樣式。我有六個盒子和六個按鈕。當我試圖使用下面的JavaScript。點擊一個按鈕將刪除所有框的樣式。我應該怎麼做，以便它隻影響按鈕所在的框，當我點擊它時？多個按鈕開關

<script type="text/javascript"> 
    var divheight; 
    $(".edit-one-button").click(function() { 
     var btnname = $(this).val(); 
     if (btnname == 'Edit') { 
     divheight = $('.widget').attr('style'); 
     $('.widget').removeAttr('style'); 
     $(this).nextUntil('.edit-one-button').toggle(); 
     } 
     else { 
     $(this).nextUntil('.edit-one-button').toggle(); 
     $('.widget').attr('style', divheight); 
     } 
    }); 
    </script>

HTML：

<div class="eq-height2 widget> 
     <header> 
     <h2>Contact1</h2> 
     </header> 
     <input type="submit" value="Edit" class="edit-one-button/> 
     <fieldset id="Fieldset1"> 
      blabla 
     </fieldset> 
     <fieldset id="Fieldset2"> 
      blabla 
     </fieldset> 
    </div> 

<div class="eq-height2 widget> 
     <header> 
     <h2>Contact2</h2> 
     </header> 
     <input type="submit" value="Edit" class="edit-one-button/> 
     <fieldset id="Fieldset3"> 
      blabla 
     </fieldset> 
     <fieldset id="Fieldset4"> 
      blabla 
     </fieldset> 
    </div> 

<div class="eq-height2 widget> 
     <header> 
     <h2>Contact3</h2> 
     </header> 
     <input type="submit" value="Edit" class="edit-one-button/> 
     <fieldset id="Fieldset5"> 
      blabla 
     </fieldset> 
     <fieldset id="Fieldset6"> 
      blabla 
     </fieldset> 
    </div>

來源

2012-07-20 wcdomy

嘗試改變：

$('.widget').removeAttr('style');

到：

$(this).closest('.widget').removeAttr('style');

來源

2012-07-20 18:58:06 j08691

它的工作原理。但是，當我第二次單擊按鈕時，樣式未重置爲原始樣式。我需要改變有關else語句的一些情況嗎？ – wcdomy 2012-07-20 19:14:46

使用jQuery的[toggleClass]（http://api.jquery.com/toggleClass/）函數添加和刪除樣式而不是刪除屬性可能會更好。你也可以嘗試改變'$（'。widget'）。attr（'style'，divheight）;'to'$（this）.closest（'。widget'）。attr（'style'，divheight）;' – j08691 2012-07-20 19:16:00

它沒有找到自己的.widget的風格，但頁面上的第一個.widget :( – wcdomy 2012-07-20 19:22:20

多個按鈕開關

回答

相關問題