jQuery scrollLeft无法点击

时间:2013-05-21 12:14:33

标签: jquery html

我有一个表单,用户可以使用“上一页”和“下一页”按钮浏览表单。 这是我的代码和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在#slideWrapParq div中彼此相邻,所以当点击按钮时,这个div应该是slideLeft,以便将下一张幻灯片放入。由于某种原因,这不起作用,我过去几个小时一直试图对它进行排序! 它绝对是正确的选择器,我已经测试了其他jQuery事件。 谁能看到我哪里错了?

由于

2 个答案:

答案 0 :(得分:2)

在审核了你的jsfiddle后,我发现你没有任何容器overflow设置为滚动,这让我觉得你对scrollLeft及其运作方式有误解。

考虑到这一假设,我认为你最有可能寻找一种滑动效果,可以在没有可滚动容器的情况下轻松完成。你的jsfiddle非常混乱所以我使用scrollLeftleft创建了一个非常简单的滑块示例:

scrollLeft | DEMO

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

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

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

左(滑动式)| DEMO

$('.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动画。

答案 1 :(得分:0)

我认为应该是:

animate({scrollLeft: "+=770"}