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 在 div 中彼此相邻放置，#slideWrapParq因此当单击按钮时，该 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);
});

我在 CSS 上做了一些注释，以帮助您更好地理解scrollLeft动画。

于 2013-05-21T14:52:18.570 回答
0

我认为应该是：

animate({scrollLeft: "+=770"}
于 2013-05-21T12:23:47.293 回答