多个按钮开关

时间:2012-07-20 18:52:29

标签: javascript button switch-statement

当我点击.edit-one-button按钮时,我想删除.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>

1 个答案:

答案 0 :(得分:1)

尝试更改:

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

为:

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