javascript - Jquery複数のdivにshow effectを使用して方向を与える方法は?

Question

いくつかのjQueryコードに問題があります。フォームにいくつかのフィールドを表示しようとしていますが、ユーザーが[はい]をクリックし、[いいえ]をクリックすると非表示になる場合にのみ表示する必要があります.これは機能しますが、フィールドを表示すると、それらを互いに重ねてマウントします。私はそれに方向性を与えようとしていますが、うまくいきません。これが私のコードです：

<!DOCTYPE html>
<html>
<head>
<style>
div { background:#def3ca; margin:3px; width:80px;
display:none; float:left; text-align:center; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>

<label> Do you want to create a new entry?  </label>
<button id="showr" type="button" >YES</button>
<button id="hidr" type="button" >NO</button>
<br/>

<div class="mydiv">
 <label> Field #1 
 <span class="small">Describe your field</span>
 </label>
 <textarea  rows="10" cols="40" name="" id=""  ></textarea>
</div>

<div class="mydiv">
 <label> Field #2
 <span class="small">Describe your field</span>
 </label>
 <textarea  rows="10" cols="40" name="" id=""  ></textarea>
</div>


<script>
$("#showr").click(function () {
$("div").first().show("fast", function showNext() {
$(this).next("div").show("fast", showNext);
});
});

$("#hidr").click(function () {
$("div").hide(1000);
});
</script>

</body>
</html>

jsフィドル

センタリングを含む目的の結果を得るには、次の CSS を使用します。

.mydiv {
    background:#def3ca;
    margin: 0 auto;
    width:400px;
    text-align:left;
    clear:both;
    display: none;
}
.mytext {
    text-align:center;
}
.wrapper {
    display:block;
}

次のマークアップを使用します。

<div class="wrapper">
    <label>Do you want to create a new entry?</label>
    <button id="showr" type="button">YES</button>
    <button id="hidr" type="button">NO</button>
    <br/>
    <div class="mydiv">
        <label>Field #1 <span class="small">Describe your field</span>

        </label>
        <div class="mytext">
            <textarea rows="10" cols="40" name="" class="txtField" id=""></textarea>
        </div>
    </div>
    <div class="mydiv">
        <label>Field #2 <span class="small">Describe your field</span>

        </label>
        <div class="mytext">
            <textarea rows="10" cols="40" name="" class="txtField" id=""></textarea>
        </div>
    </div>
</div>

すべてのラッパーを追加してからdisplay: block、余白.mydivに設定したことに注意してください0 auto。これにより、センタリングが可能になります。

私はあなたのjQueryにも取り組み、少し改善しました。

$("#showr").click(function () {
    $(".mydiv").show("fast");
});

$("#hidr").click(function () {
    $(".mydiv").hide(1000);
});

javascript - Jquery複数のdivにshow effectを使用して方向を与える方法は?

2 に答える 2

jsフィドル

Related

Reference