javascript - 为 Div 元素样式 "Top"创建最大值和最小值,使 onclick 函数处于非事件状态

标签 javascript jquery

我有一个正在使用的票务插件,它提供了 html 事件表。我希望该表可以通过单击向上和向下箭头来滚动浏览事件。因此,我将表格放在一个 div 后面,该 div 隐藏了溢出,仅显示该 div 中的 3 个事件。

然后,我创建了一些代码,允许顶部箭头和底部箭头添加或减去 div 元素样式的“顶部”,以便在受限制的 div 后面上下移动表格。

问题是用户可以不断点击超出表格可见范围的顶部和向下箭头。这意味着如果用户点击顶部箭头太多次,则该表对用户来说基本上就会消失。我希望实现一些 JavaScript,它表示如果 div 元素到达 top:0px,则禁止顶部箭头单击功能。如果 div 元素到达 top: -434px 那么它不允许底部箭头功能。

一旦这些函数不再是那些特定的最大值和最小值,它们就必须再次激活。我在这里创建了一个粗略的 codepen 演示:https://codepen.io/TheBrandsmen/pen/JjdEQgj

它没有包含所有 CSS 等内容,但总体思路已经有了。如果关于如何使 html 表格可滚动还有其他更好的想法,请随时发表评论。

<body>
<div class="up-arrow" onclick="MoveDiv()"><img src="https://thebrandsmen.com/staging/thegrizzlyrose/wp-content/uploads/2020/02/up-arrow.png"></div>

<div class="carousel-frame"> 
<script>twSendEvent({'twView':'list','event':'twView'});</script><style>
</style>
<div class="tw-plugin-upcoming-event-list" id="id_1" style="top: 0px;">
    <table>
                                <tbody><tr>
                                <td>
                    <div class="tw-event-venue-name tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-venue-address tw-remove-when-empty">
                                                                    </div>
                    <div class="tw-event-prefix-text tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-name tw-remove-when-empty">
                                                    <a href="/?event_id=10214595">
                                Runaway June                            </a>
                                            </div>
                    <ul class="tw-attraction-list tw-remove-when-empty">
                                            </ul>
                    <div class="tw-event-date-time tw-remove-when-empty">
                                                                            <span class="tw-event-date-complete"> <span class="tw-event-date">Feb 29</span></span>
                                                                                            </div>
                    <div class="tw-event-description tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-additional-text tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-price tw-remove-when-empty">

                    </div>
                    <div class="tw-event-links tw-remove-when-empty">
                        <span class="tw-event-more-info-link tw-remove-when-empty">
                                                        </span>
                        <span class="tw-event-ticketing-link tw-remove-when-empty">
                                                            </span>
                    </div>
                </td>
            </tr>
                        <tr>
                                <td>
                    <div class="tw-event-venue-name tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-venue-address tw-remove-when-empty">
                                                                    </div>
                    <div class="tw-event-prefix-text tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-name tw-remove-when-empty">
                                                    <a href="/?event_id=9929345">
                                Clay Walker                            </a>
                                            </div>
                    <ul class="tw-attraction-list tw-remove-when-empty">
                                            </ul>
                    <div class="tw-event-date-time tw-remove-when-empty">
                                                                            <span class="tw-event-date-complete"> <span class="tw-event-date">Mar 06</span></span>
                                                                                            </div>
                    <div class="tw-event-description tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-additional-text tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-price tw-remove-when-empty">

                    </div>
                    <div class="tw-event-links tw-remove-when-empty">
                        <span class="tw-event-more-info-link tw-remove-when-empty">
                                                        </span>
                        <span class="tw-event-ticketing-link tw-remove-when-empty">
                                                            </span>
                    </div>
                </td>
            </tr>
                        <tr>
                                <td>
                    <div class="tw-event-venue-name tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-venue-address tw-remove-when-empty">
                                                                    </div>
                    <div class="tw-event-prefix-text tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-name tw-remove-when-empty">
                                                    <a href="/?event_id=9929365">
                                Clay Walker                            </a>
                                            </div>
                    <ul class="tw-attraction-list tw-remove-when-empty">
                                            </ul>
                    <div class="tw-event-date-time tw-remove-when-empty">
                                                                            <span class="tw-event-date-complete"> <span class="tw-event-date">Mar 07</span></span>
                                                                                            </div>
                    <div class="tw-event-description tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-additional-text tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-price tw-remove-when-empty">

                    </div>
                    <div class="tw-event-links tw-remove-when-empty">
                        <span class="tw-event-more-info-link tw-remove-when-empty">
                                                        </span>
                        <span class="tw-event-ticketing-link tw-remove-when-empty">
                                                            </span>
                    </div>
                </td>
            </tr>
                        <tr>
                                <td>
                    <div class="tw-event-venue-name tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-venue-address tw-remove-when-empty">
                                                                    </div>
                    <div class="tw-event-prefix-text tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-name tw-remove-when-empty">
                                                    <a href="/?event_id=10117425">
                                JASON BOLAND &amp; THE STRAGGLERS                            </a>
                                            </div>
                    <ul class="tw-attraction-list tw-remove-when-empty">
                                            </ul>
                    <div class="tw-event-date-time tw-remove-when-empty">
                                                                            <span class="tw-event-date-complete"> <span class="tw-event-date">Mar 13</span></span>
                                                                                            </div>
                    <div class="tw-event-description tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-additional-text tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-price tw-remove-when-empty">

                    </div>
                    <div class="tw-event-links tw-remove-when-empty">
                        <span class="tw-event-more-info-link tw-remove-when-empty">
                                                        </span>
                        <span class="tw-event-ticketing-link tw-remove-when-empty">
                                                            </span>
                    </div>
                </td>
            </tr>
                        <tr>
                                <td>
                    <div class="tw-event-venue-name tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-venue-address tw-remove-when-empty">
                                                                    </div>
                    <div class="tw-event-prefix-text tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-name tw-remove-when-empty">
                                                    <a href="/?event_id=10356305">
                                Jerrod Niemann                            </a>
                                            </div>
                    <ul class="tw-attraction-list tw-remove-when-empty">
                                            </ul>
                    <div class="tw-event-date-time tw-remove-when-empty">
                                                                            <span class="tw-event-date-complete"> <span class="tw-event-date">Mar 20</span></span>
                                                                                            </div>
                    <div class="tw-event-description tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-additional-text tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-price tw-remove-when-empty">

                    </div>
                    <div class="tw-event-links tw-remove-when-empty">
                        <span class="tw-event-more-info-link tw-remove-when-empty">
                                                        </span>
                        <span class="tw-event-ticketing-link tw-remove-when-empty">
                                                            </span>
                    </div>
                </td>
            </tr>
                        <tr>
                                <td>
                    <div class="tw-event-venue-name tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-venue-address tw-remove-when-empty">
                                                                    </div>
                    <div class="tw-event-prefix-text tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-name tw-remove-when-empty">
                                                    <a href="/?event_id=10367135">
                                Josh Gracin                            </a>
                                            </div>
                    <ul class="tw-attraction-list tw-remove-when-empty">
                                            </ul>
                    <div class="tw-event-date-time tw-remove-when-empty">
                                                                            <span class="tw-event-date-complete"> <span class="tw-event-date">Mar 27</span></span>
                                                                                            </div>
                    <div class="tw-event-description tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-additional-text tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-price tw-remove-when-empty">

                    </div>
                    <div class="tw-event-links tw-remove-when-empty">
                        <span class="tw-event-more-info-link tw-remove-when-empty">
                                                        </span>
                        <span class="tw-event-ticketing-link tw-remove-when-empty">
                                                            </span>
                    </div>
                </td>
            </tr>
                        <tr>
                                <td>
                    <div class="tw-event-venue-name tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-venue-address tw-remove-when-empty">
                                                                    </div>
                    <div class="tw-event-prefix-text tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-name tw-remove-when-empty">
                                                    <a href="/?event_id=10188845">
                                Aaron Lewis                            </a>
                                            </div>
                    <ul class="tw-attraction-list tw-remove-when-empty">
                                            </ul>
                    <div class="tw-event-date-time tw-remove-when-empty">
                                                                            <span class="tw-event-date-complete"> <span class="tw-event-date">Mar 28</span></span>
                                                                                            </div>
                    <div class="tw-event-description tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-additional-text tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-price tw-remove-when-empty">

                    </div>
                    <div class="tw-event-links tw-remove-when-empty">
                        <span class="tw-event-more-info-link tw-remove-when-empty">
                                                        </span>
                        <span class="tw-event-ticketing-link tw-remove-when-empty">
                                                            </span>
                    </div>
                </td>
            </tr>
                        <tr>
                                <td>
                    <div class="tw-event-venue-name tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-venue-address tw-remove-when-empty">
                                                                    </div>
                    <div class="tw-event-prefix-text tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-name tw-remove-when-empty">
                                                    <a href="/?event_id=10218455">
                                COPPER CHIEF                            </a>
                                            </div>
                    <ul class="tw-attraction-list tw-remove-when-empty">
                                            </ul>
                    <div class="tw-event-date-time tw-remove-when-empty">
                                                                            <span class="tw-event-date-complete"> <span class="tw-event-date">Apr 03</span></span>
                                                                                            </div>
                    <div class="tw-event-description tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-additional-text tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-price tw-remove-when-empty">

                    </div>
                    <div class="tw-event-links tw-remove-when-empty">
                        <span class="tw-event-more-info-link tw-remove-when-empty">
                                                        </span>
                        <span class="tw-event-ticketing-link tw-remove-when-empty">
                                                            </span>
                    </div>
                </td>
            </tr>
                        <tr>
                                <td>
                    <div class="tw-event-venue-name tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-venue-address tw-remove-when-empty">
                                                                    </div>
                    <div class="tw-event-prefix-text tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-name tw-remove-when-empty">
                                                    <a href="/?event_id=9993135">
                                106.7 The Bull Birthday Bash with Michael Ray and Carly Pearce                            </a>
                                            </div>
                    <ul class="tw-attraction-list tw-remove-when-empty">
                                            </ul>
                    <div class="tw-event-date-time tw-remove-when-empty">
                                                                            <span class="tw-event-date-complete"> <span class="tw-event-date">Apr 08</span></span>
                                                                                            </div>
                    <div class="tw-event-description tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-additional-text tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-price tw-remove-when-empty">

                    </div>
                    <div class="tw-event-links tw-remove-when-empty">
                        <span class="tw-event-more-info-link tw-remove-when-empty">
                                                        </span>
                        <span class="tw-event-ticketing-link tw-remove-when-empty">
                                                            </span>
                    </div>
                </td>
            </tr>
                        <tr>
                                <td>
                    <div class="tw-event-venue-name tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-venue-address tw-remove-when-empty">
                                                                    </div>
                    <div class="tw-event-prefix-text tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-name tw-remove-when-empty">
                                                    <a href="/?event_id=10376005">
                                RAYNE JOHNSON                            </a>
                                            </div>
                    <ul class="tw-attraction-list tw-remove-when-empty">
                                            </ul>
                    <div class="tw-event-date-time tw-remove-when-empty">
                                                                            <span class="tw-event-date-complete"> <span class="tw-event-date">Apr 17</span></span>
                                                                                            </div>
                    <div class="tw-event-description tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-additional-text tw-remove-when-empty">
                                            </div>
                    <div class="tw-event-price tw-remove-when-empty">

                    </div>
                    <div class="tw-event-links tw-remove-when-empty">
                        <span class="tw-event-more-info-link tw-remove-when-empty">
                                                        </span>
                        <span class="tw-event-ticketing-link tw-remove-when-empty">
                                                            </span>
                    </div>
                </td>
            </tr>
    </tbody></table>
</div>
    <style>
        .tw-paginate {
            text-align: center;
            position: relative;
            width: 100%;
        }
    </style>


    <div class="tw-paginate">
        <span class="tw-paginate-text">
                            <span class="previous">« Previous</span>
                        <span class="seperator">|</span>
            <span class="lead">Page:</span>
                                                <span class="current">1</span>
                                                                <span class="link"><a href="?twpage=1">2</a></span>
                                        <span class="seperator">|</span>
                            <span class="next"><a href="?twpage=1">Next »</a></span>
                    </span>
    </div>

</div>

<div class="down-arrow" onclick="DownDiv()"><img src="https://thebrandsmen.com/staging/thegrizzlyrose/wp-content/uploads/2020/02/Down-Arrow.png"></div>
</body>
body {
  background: gray;
}

.slider-flex-2 tr:nth-child(odd), .slider-flex-2 .pricing-table>li:nth-child(odd), .slider-flex-2 .pricing-extra {
    background: transparent !important;
}

.main_color tr:nth-child(even) {
        background: transparent !important;
}

.slider-flex-2 table {
    background: transparent !important;
}

.slider-flex-2 tr th:first-child, .slider-flex-2 tr td:first-child {
    border: none;
}

.slider-flex-2 td {
    display: flex;
    justify-content: center;
}

td {
    display: flex;
}

.slider-flex-2 .tw-paginate {
    display: none;
}

.slider-flex-2 .tw-plugin-upcoming-event-list a {
    color: #ffffff;
}


span.tw-event-date {
    font-size: 24px;
    font-family: Roboto;
    font-weight: bold;
}

span.tw-event-date:before {
    content: "-";
    padding-right: 10px;
}

.tw-event-name.tw-remove-when-empty {
    max-width: 20vw;
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 24px;
    font-family: Roboto;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
}



.move-up {
    margin-top: -47px;
    transition: 1s;
        font-size: 40px;
}

.move-down {
    margin-top: 47px;
    transition: 1s;
        font-size: 40px;
}


.carousel-frame {
    height: 185px;
    overflow: hidden;
}

.tw-plugin-upcoming-event-list {
    position: relative;
    top:0px;
}

.tw-plugin-upcoming-event-list td {
        padding: 16px 12px;
}

.tw-plugin-upcoming-event-list span.tw-event-date {
    white-space: nowrap;
}


.tw-plugin-upcoming-event-list td {
    border-bottom: 1px solid #ffffff !important;
}


#tw-plugin-upcoming-event-list  {
        position: relative;
    top:0px;
}


.up-arrow {
    margin-bottom: 20px;
      max-width: 20vw; 
}

.up-arrow img {
    margin: auto;
    display: block;
}



.down-arrow {
    margin-top: 20px;
    max-width: 20vw; 
}

.down-arrow img {
  margin: auto;
    display: block;
}


$( document ).ready(function() {
    $(".tw-plugin-upcoming-event-list").css("top","0");
});


    $(function(){

    $('.tw-plugin-upcoming-event-list').attr('id',function(i){
          return 'id_'+(i+1);
    });

}); 



  function DownDiv()
            {
                div = document.getElementById("id_1");

                div.style.top = parseInt(div.style.top) - 62 + "px";
            }

            function MoveDiv()
            {
                div = document.getElementById("id_1");

                div.style.top = parseInt(div.style.top) + 62 + "px";
            }

最佳答案

为您所做的更改是检查 div 当前顶部并根据表格高度



$( document ).ready(function() {
    $(".tw-plugin-upcoming-event-list").css("top","0");
});


    $(function(){

    $('.tw-plugin-upcoming-event-list').attr('id',function(i){
          return 'id_'+(i+1);
    });

}); 



  function DownDiv()
            {
                div = document.getElementById("id_1");
              var tableOffset = 150; // teh offest until the end the height is  a bit bigger
              var top =  parseInt(div.style.top)
              var tblStyle =getComputedStyle(div.querySelector('table'))
              var tblHeight = parseInt(tblStyle.height)
              if(top  < ((tblHeight -tableOffset )*-1) ){ // chcek if the top is at the end of the table height
                div.style.top = parseInt(div.style.top)+ "px";
              }else{
                div.style.top = parseInt(div.style.top) - 62 + "px";
              }

            }

            function MoveDiv()
            {
                div = document.getElementById("id_1");
              var top =  parseInt(div.style.top)
                if(top  == 0 ||top > 0){ // check if the the top is 0 or bigger then 0 and make it the same top as before

                                  div.style.top = top + "px";

                }
              else{
                                div.style.top = top + 62 + "px";

              }
            }



关于javascript - 为 Div 元素样式 "Top"创建最大值和最小值,使 onclick 函数处于非事件状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60397221/

相关文章:

javascript - Angular 7 | HostListener 模糊条件停止所有其他事件回调

jquery - 表单输入框是可制表符但不可单击的 Adob​​e Muse 网站

jquery - 发布到 iframe 后,使后退按钮 (bfcache) 的浏览器缓存失效

jquery - 循环遍历 div - 将类添加到上一个和下一个 div

javascript - 如何在 Javascript 中打印一次日期标签

javascript - JS 中剩余的复选框名称导致 IE 运行缓慢,而不是 FF?

javascript - HighCharts showLoading() 未按预期工作

javascript - 构建 js/ajax 网络应用程序 : separating structure and content in dynamic web form

jquery addClass() 到多个类的第一个位置

使用azure移动服务脚本时出现javascript错误