.edit-one-button であるボタンをクリックすると、.widget であるボックスのスタイルを削除したいと思います。6 つのボックスと 6 つのボタンがあります。以下のjavascriptを使用しようとしていたとき。1 つのボタンをクリックすると、すべてのボックスのスタイルが削除されます。ボタンをクリックしたときにボタンが存在するボックスにのみ影響するようにするにはどうすればよいですか?
<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>