个人中心
gpt4 book ai didi

javascript - 自定义刷卡器不适用于 body

转载 作者：行者123 更新时间：2023-11-28 00:11:30 24 4
gpt4 key购买 nike

我编写了一个带有警报的自定义滑动器。它的代码在这个 link .
当我从左向右或从右向左滑动时，它会成功发出警报。
在这里，我仅使用 div 进行滑动操作。代码是这样的:

<div id="test" class="text-center"></div>  

<script>
        $(document).ready(function() {  
            $(".text-center").swiperight(function() {  
                /*$("#myCarousel").carousel('prev');  */
                alert("Swiped to right");
            });  
            $(".text-center").swipeleft(function() {  
                /*$("#myCarousel").carousel('next');  */
                alert("Swiped to left");
            });  
        });  
</script>

如果我像这样更改 body 的 id，

<style type="text/css">
    #test{
        position: absolute;
        background-color: #0067ac;
        width:100%;
        height:500px;
    }
    .text-center{
        position: relative;
        margin-right: 3%;
        margin-top: 5%;
    }    
<body id="test" class="text-center">
<script type="text/javascript">
        $(document).ready(function() {  
            $("#test").swiperight(function() {  
                /*$("#myCarousel").carousel('prev');  */
                alert("Swiped to right");
            });  
            $("#test").swipeleft(function() {  
                /*$("#myCarousel").carousel('next');  */
                alert("Swiped to left");
            });  
        });  
    </script>

然后滑动即可。 link在这里。
但如果我将它应用到我的代码中，那么它不适用于 body 标记。我的代码是:

<div id = "mainDiv" class = "container" style="padding:0px;width:100%;height:100%">
            <div id = "header">
                <span id = "icons">
                    <span id = "menu"></span>
                    <span onclick="goBack()" id = "back"></span>
                </span>
                <span id = "title">
                    <span id="junos"> JUNOS </span><span id = "genius">GENIUS</span> 
                </span>
            </div>

            <div id ="body" class="container-fluid" style="position:relative;">
            <!-- <div id="swiper"> -->
                  <div id="searchMenu" class="col-xs-4" style="height:400px; overflow-y:auto;padding:0px;display:none;min-width: 250px;background-color:transparent;">
            </div>
                <p class="text-center" onclick="goBack()"  style="padding-top:12px;">Help</p>
                 <!-- Start  -->
                     <ul class="list=unstyled text-justify" style="margin-right:20px;">
<li> JUNOS GENIUS is a fun way to improve your skills with Juniper Networks Junos operating system and prepare for technical certification. The Application is a virtual flashcard reader that includes decks of multiple choice questions for several Junos-based exams including JNCIA-Junos, JNCIS-ENT, JNCIS-SEC, and JNCIS-SP. You answer multiple-choice questions and get immediate feedback on accuracy of the answer. </li>
<li> Questions may be answered in Study Mode, Timed Test Mode, or Challenge Instructor Mode. </li>

<ul>

<li> In Study Mode, choose the question category that interests you and begin answering questions. The system will not track your score and no achievements are earned for correct answers.  </li>
<li> To enter Timed Test Mode, choose any question category and then tap Timed Test. This will simulate a live exam and provide you with 60 minutes to answer 60 questions selected at random from among all categories in the deck. You will see percentage correct score on completion of 60 questions or at the end of 60 minutes (whichever comes first). </li>
<li>
To enter Challenge Instructor Mode, choose a question category then tap Challenge Instructor to challenge the ranks of instructors. Score higher on the category than the instructor to earn a device achievement. Device achievements are specific to question category. Instructors should be challenged, and beaten, repeatedly to earn higher quantities of device achievements for use in your ‘My Network’. Beating instructors becomes progressively more difficult as you work through the ranks.
</li>
</ul>
<li>My Network:
Device achievements (earned by beating instructors in Challenge Instructor Mode) are used to build network views in a handy network drawing tool called My Network. All Juniper Networks devices earned are available for addition to the My Network view. You are also able to add LAN segments, WAN segments, and end user devices including laptops, printers, and servers to the My Network view. And you have the ability to share your My Network diagram through email or social media.</li>

</ul>
                 <!-- End   -->
                </div>
            </div>  
#mainDiv {
            background-image: url("../JunosImages/mob/junos_genius_P_960x720_question_blank_phone.jpg");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            height: 100%;
            width: 100%;
        }
/*custom js*/
          $(document).ready(function() {  
            $("#mainDiv").swiperight(function() {  
              alert("Swiped to right");
            });  
            $("#mainDiv").swipeleft(function() {  
              alert("Swiped to left");
            });  
          });

最佳答案

这是你的CSS的问题。

我刚刚更新了 css，它工作正常:

看看这个 fiddle plunker Code

CSS 更新在这里:

<style type="text/css">
#test{
    position: absolute;
    background-color: #0067ac;
    width:100%;
    height:500px;
}
.text-center{
    position: relative;
    margin-right: 3%;
    margin-top: 5%;
}
</style>

关于javascript - 自定义刷卡器不适用于 body ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30838324/

24 4 0
文章推荐： javascript - 在 SPA 中堆叠页面，是好主意还是坏主意？
文章推荐： c++ - 逻辑运算 : I want to make Logic operations easily
文章推荐： c++ - 如果使用 vector 如何获取数组大小
文章推荐： javascript - testcomplete 中的 onlogerror 事件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com