0

ユーザーが「前へ」ボタンと「次へ」ボタンを使用してフォーム内を移動できるフォームがあります。ここに私のコードとjQueryがあります:

<div id="slideWrapParq">
    <div id="slide1">           
        <div class="parqInfo">Regular physical activity is fun and healthy, and increasingly more people are starting to become more active every day. Being more active is very safe for most people. However, some people should check with their doctor before they start becoming much more physically active. Completion of this questionnaire is a first step when planning to increase the amount of physical activity in your life.</div>
        <div class="parqWrapInner">
            <form action="/" method="post" id="parqForm">
                <div class="parqRow">
                    <div class="parqCell"><span class="red">Q1: </span>Has a Doctor / Medical Professional ever diagnosed you with a heart condition and indicated you should restrict your physical activity?</div>
                    <div class="parqCell">
                        <span>Yes</span><input type="radio" name="Q1" value="yes">
                        <span>No</span><input type="radio" name="Q1" value="no">
                    </div>
                </div>
                <div class="parqRow">
                    <div class="parqCell"><span class="red">Q2: </span>When you perform physical activity, do you feel pain in your chest? </div>
                    <div class="parqCell">
                        <span>Yes</span><input type="radio" name="Q2" value="yes">
                        <span>No</span><input type="radio" name="Q2" value="no">
                    </div>
                </div>
                                <div class="parqRow">
                    <div class="parqCell"><span class="red">Q3: </span>When you were not engaging in physical activity, have you experienced chest pain in the past month? </div>
                    <div class="parqCell">
                        <span>Yes</span><input type="radio" name="Q3" value="yes">
                        <span>No</span><input type="radio" name="Q3" value="no">
                    </div>
                </div>
                <div class="parqRow">
                    <div class="parqCell"><span class="red">Q4: </span>Do you ever faint or get dizzy and lose your balance? </div>
                    <div class="parqCell">
                        <span>Yes</span><input type="radio" name="Q4" value="yes">
                        <span>No</span><input type="radio" name="Q4" value="no">
                    </div>
                </div>
                <div class="parqRow">
                    <div class="parqCell"><span class="red">Q5: </span>Do you have an injury or orthopaedic condition (such as a back, hip, or knee problem) that may worsen due to a change in your physical activity?</div>
                    <div class="parqCell">
                        <span>Yes</span><input type="radio" name="Q5" value="yes">
                        <span>No</span><input type="radio" name="Q5" value="no">
                    </div>
                </div>
                <div class="parqRow">
                    <div class="parqCell"><span class="red">Q6: </span>Do you have high blood pressure or a heart condition in which a Doctor / Medical Professional is currently prescribing a medication?</div>
                    <div class="parqCell">
                        <span>Yes</span><input type="radio" name="Q6" value="yes">
                        <span>No</span><input type="radio" name="Q6" value="no">
                    </div>
                </div>
                                <div class="parqRow">
                    <div class="parqCell"><span class="red">Q7: </span>Are you pregnant? </div>
                    <div class="parqCell">
                        <span>Yes</span><input type="radio" name="Q7" value="yes">
                        <span>No</span><input type="radio" name="Q7" value="no">
                    </div>
                </div>
                <div class="parqRow">
                    <div class="parqCell"><span class="red">Q8: </span>Do you have insulin dependent diabetes? </div>
                    <div class="parqCell">
                        <span>Yes</span><input type="radio" name="Q8" value="yes">
                        <span>No</span><input type="radio" name="Q8" value="no">
                    </div>
                </div>
                #<div class="parqRow">
                    <div class="parqCell"><span class="red">Q9: </span>Are you 69 years of age or older and not used to being very active?</div>
                    <div class="parqCell">
                        <span>Yes</span><input type="radio" name="Q9" value="yes">
                        <span>No</span><input type="radio" name="Q9" value="no">
                    </div>
                </div>
                                <div class="parqRow">
                    <div class="parqCell"><span class="red">Q10: </span>Do you know of any other reason you should not exercise or increase your physical activity? </div>
                    <div class="parqCell">
                        <span>Yes</span><input type="radio" name="Q10" value="yes">
                        <span>No</span><input type="radio" name="Q10" value="no">
                    </div>
                </div>
                            <input type="hidden" name="MEMBERGUID" id="MEMBERGUID" value="0399589c-66bd-e211-8911-00155d007722" />
            </form>
            <p class="point"><span class="red">* </span>If you honestly answered no to all questions you can be reasonably certain you can safely increase your level of physical activity gradually.</p>
            <p class="point"><span class="red">* </span>If your health changes so you then answer yes to any of the above questions, seek guidance from a Doctor.</p>
            <p class="point"><span class="red">* </span>If you health changes so that you then answer yes to any of the above questions, tell your Doctor / medical professional. Ask whether you should change your physical activity plan.</p>
        </div>
        <div class="slideButtons">
            <a href="/~fitspace/index.php/membership?view=memberForm1" class="signupFormPrev">Prev</a> 
            <a href="#" class="signupFormNext">Next</a> 
        </div>
    </div>
    <div id="slide2">
        sgfskgposgkporskgrspogk
    </div>
</div>

jQuery:

jQuery('.signupFormNext').click(function(e) {
    jQuery('#slideWrapParq').animate({scrollLeft: "+=770"}, 500, "swing");
});

そしてCSS：

#parqWrapInner {
  min-height: 350px;
  overflow: hidden;
  width: 2310px;
}
#parqWrapper div#slide1, #parqWrapper div#slide2, #parqWrapper div#slide3 {
  display: block;
  float: left;
  height: 350px;
  position: relative;
  width: 770px;
}

スライド div は#slideWrapParqdiv 内で隣り合わせに配置されているため、ボタンをクリックすると、次のスライドを表示するために、この div は slideLeft になるはずです。何らかの理由でこれが機能せず、最後に並べ替えようとしました数時間！これは間違いなく正しいセレクターであり、他の jQuery イベントもテストしました。私がどこで間違っているのか誰にもわかりますか？

ありがとう

4

2 に答える 2

2

jsfiddle を確認したところ、スクロールするコンテナが設定されていないことに気付きました。これは、その仕組みと仕組みoverflowについて誤解していると思われます。scrollLeft

その仮定を念頭に置いて、スクロール可能なコンテナーなしで簡単に実行できるスライド効果を探している可能性が高いと思います。あなたの jsfiddle は非常に混沌としていたので、 と の両方scrollLeftを使用して非常に単純なスライダーの例を作成しましたleft。

左スクロール | デモ

$('.next').on("click", function (event) {
    event.preventDefault();
    $("#content").animate({
        scrollLeft: '+=600'
        }, 600);
});

$('.prev').on("click", function (event) {
    event.preventDefault();

    $("#content").animate({
        scrollLeft: '-=600'
        }, 600);
});

左 (スライドのような) | デモ

$('.next').on("click", function (event) {
    event.preventDefault();
    $("#contentWrapper").animate({
        left: '-=600'
        }, 600);
});

$('.prev').on("click", function (event) {
    event.preventDefault();

    $("#contentWrapper").animate({
        left: '+=600'
        }, 600);
});

scrollLeftアニメーションをよりよく理解できるように、CSS に関するメモをいくつか作成しました。

于 2013-05-21T14:52:18.570 に答える