主页 / 问题 / 1383430
Accepted
Danila
Asked:2022-07-18 20:47:31 +0000 UTC2022-07-18 20:47:31 +0000 UTC

Jquery：手动切换后 Opera 和 Chrome 中的自动选项卡切换中断

  • 772

单选按钮上的选项卡中有新闻组，它们会自动切换到setInterval. 当您将鼠标悬停在标签或新闻本身上时，切换停止。当光标离开新闻块时，切换继续。但是在 Chrome 和 Opera 中，如果您开始手动切换标签，一切都会中断：光标离开后，某种水上迪斯科开始了。

在调试器中，我注意到手动切换选项卡时，属性 . 没有添加到单选按钮checked中。好的，我添加了一个强制添加 this 的脚本checked。但问题并没有解决。同时在 Mozilla 中一切正常。

告诉我，标签出现这种行为的原因是什么以及如何解决？（最好全屏播放示例代码。）在不同浏览器中测试的沙盒链接：https ://jsfiddle.net/dh29rubf/1/

function changeCountry() {
  $('[name="news-radio"]').each(function(){
    if($(this).next('[name="news-radio"]').length == 0) {
      $(this).removeAttr('checked');
      $('[name="news-radio"]:first-child').attr('checked','checked');
    }
    if($(this).attr('checked')) {
      $(this).removeAttr('checked');
      $(this).next().attr('checked','checked');
      return false;
    }
  });
}

let timer = setInterval(changeCountry, 2000);

$('.news-label-wrap, .big-news, .small-news').on('mouseover', function(){
  clearInterval(timer);
});

$('#main-news').on('mouseleave', function(){
  timer = setInterval(changeCountry, 2000);
});

//скрипт, который принудительно добавляет checked при ручном переключении
$('.news-label-wrap label').on('click',function(){
  let check = $(this).attr('for');
  $('[name="news-radio"]').each(function(){
    if($(this).attr('id') == check) {
      $(this).attr('checked','checked');
      $('[name="news-radio"]').not($(this)).removeAttr('checked');
    }
  });
});
* {
  box-sizing: border-box;
}
#main-news {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
}
#main-news [type="radio"] {
    display: none;
}
.news-label-wrap {
    display: flex;
    gap: 60px;
}
.news-label-wrap label {
    display: block;
    font-size: 18px;
    line-height: 20px;
    text-transform: uppercase;
    cursor: pointer;
}
#news-actual:checked ~ .news-label-wrap label[for="news-actual"],
#news-tunis:checked ~ .news-label-wrap label[for="news-tunis"],
#news-tanzania:checked ~ .news-label-wrap label[for="news-tanzania"],
#news-oae:checked ~ .news-label-wrap label[for="news-oae"],
#news-egipet:checked ~ .news-label-wrap label[for="news-egipet"] {
    font-weight: 700;
    color: #06C4E5;
}
#main-news h2 {
    color: #1D2D3A;
    text-transform: uppercase;
    font-size: 24px;
    line-height: 20px;
}
.news-wrap {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: absolute;
    top: 60px;
    opacity: 0;
    z-index: -1;
    transition: .5s;
}
#news-actual:checked ~ .news-wrap.news-actual,
#news-tunis:checked ~ .news-wrap.news-tunis,
#news-tanzania:checked ~ .news-wrap.news-tanzania,
#news-oae:checked ~ .news-wrap.news-oae,
#news-egipet:checked ~ .news-wrap.news-egipet {
    z-index: 1;
    opacity: 1;
    position: static;
}
.big-news {
    width: 49%;
    padding: 15px;
    border: 1px solid #06C4E5;
}
.big-news-pic {
    display: block;
    text-decoration: none;
    width: 100%;
    padding-top: 58.5%;
    background-size: cover;
}
.big-news-title {
    margin: 10px 0;
}
.big-news-title a {
    text-decoration: none;
    color: #1D2D3A;
    font-weight: 700;
    font-size: 24;
    line-height: 32px;
}
.big-news-date {
    color: #1D2D3A;
    font-weight: 700;
    font-size: 18;
    line-height: 27px;
}
.small-news-wrap {
    width: 49%;
    padding: 10px;
    border: 1px solid #06C4E5;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.small-news {
    width: 49%;
}
.small-news-pic {
    display: block;
    text-decoration: none;
    width: 100%;
    padding-top: 60%;
    background-size: cover;
}
.small-news-title {
    margin: 5px 0 15px;
}
.small-news-title a {
    text-decoration: none;
    color: #1D2D3A;
    font-weight: 700;
    font-size: 14px;
    line-height: 19px;
}
@media (max-width: 1199px) {
    #main-news h2 {
        padding: 0 15px;
    }
    .news-label-wrap {
        padding: 0 15px;
        gap: 40px;
    }
}
@media (max-width: 900px) {
    #main-news h2 {
        width: 100%;
        text-align: center;
    }
    .news-label-wrap {
        width: 100%;
        padding: 10px 15px 20px;
    }
    .news-wrap {
        top: 110px;
    }
}
@media (max-width: 800px) {
    .news-wrap {
        flex-wrap: wrap;
    }
    .big-news,
    .small-news-wrap {
        width: 100%;
    }
    .big-news {
        margin-bottom: 20px;
    }
    .news-label-wrap {
        overflow: auto;
        gap: 25px;
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="main-news">

    <input type="radio" name="news-radio" id="news-actual" checked>
    <input type="radio" name="news-radio" id="news-tunis">
    <input type="radio" name="news-radio" id="news-tanzania">
    <input type="radio" name="news-radio" id="news-oae">
    <input type="radio" name="news-radio" id="news-egipet">

    <h2>Новости туризма</h2>

    <div class="news-label-wrap">
        <label for="news-actual">Актуальное</label>
        <label for="news-tunis">Тунис</label>
        <label for="news-tanzania">Танзания</label>
        <label for="news-oae">Оаэ</label>
        <label for="news-egipet">Египет</label>
    </div>

    <div class="news-actual news-wrap">
        <div class="big-news">
            <a href="#" class="big-news-pic" style="background-image: url('https://pobedarf.ru/wp-content/uploads/2021/09/glavnaja-24-scaled-1.jpg')"></a>
            <h3 class="big-news-title"><a href="">Новости туризма 1</a></h3>
            <span class="big-news-date">11.01.2022</span>
        </div>
        <div class="small-news-wrap">
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://pobedarf.ru/wp-content/uploads/2021/09/glavnaja-24-scaled-1.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 1</a></h3>
            </div>
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://pobedarf.ru/wp-content/uploads/2021/09/glavnaja-24-scaled-1.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 1</a></h3>
            </div>
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://pobedarf.ru/wp-content/uploads/2021/09/glavnaja-24-scaled-1.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 1</a></h3>
            </div>
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://pobedarf.ru/wp-content/uploads/2021/09/glavnaja-24-scaled-1.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 1</a></h3>
            </div>
        </div>
    </div>

    <div class="news-tunis news-wrap">
        <div class="big-news">
            <a href="#" class="big-news-pic" style="background-image: url('https://u.9111s.ru/uploads/202103/22/614aebf3ad3c6f6139c1b7578b747796.jpg')"></a>
            <h3 class="big-news-title"><a href="">Новости туризма 2</a></h3>
            <span class="big-news-date">12.01.2022</span>
        </div>
        <div class="small-news-wrap">
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://u.9111s.ru/uploads/202103/22/614aebf3ad3c6f6139c1b7578b747796.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 2</a></h3>
            </div>
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://u.9111s.ru/uploads/202103/22/614aebf3ad3c6f6139c1b7578b747796.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 2</a></h3>
            </div>
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://u.9111s.ru/uploads/202103/22/614aebf3ad3c6f6139c1b7578b747796.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 2</a></h3>
            </div>
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://u.9111s.ru/uploads/202103/22/614aebf3ad3c6f6139c1b7578b747796.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 2</a></h3>
            </div>
        </div>
    </div>

    <div class="news-tanzania news-wrap">
        <div class="big-news">
            <a href="#" class="big-news-pic" style="background-image: url('https://tourweek.ru/storage/web/source/uploads/ckeditor/90964263bb3bb74f6_0.jpg')"></a>
            <h3 class="big-news-title"><a href="">Новости туризма 3</a></h3>
            <span class="big-news-date">13.01.2022</span>
        </div>
        <div class="small-news-wrap">
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://tourweek.ru/storage/web/source/uploads/ckeditor/90964263bb3bb74f6_0.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 3</a></h3>
            </div>
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://tourweek.ru/storage/web/source/uploads/ckeditor/90964263bb3bb74f6_0.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 3</a></h3>
            </div>
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://tourweek.ru/storage/web/source/uploads/ckeditor/90964263bb3bb74f6_0.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 3</a></h3>
            </div>
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://tourweek.ru/storage/web/source/uploads/ckeditor/90964263bb3bb74f6_0.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 3</a></h3>
            </div>
        </div>
    </div>

    <div class="news-oae news-wrap">
        <div class="big-news">
            <a href="#" class="big-news-pic" style="background-image: url('https://blog.axcapital.ae/wp-content/uploads/sites/5/2021/05/cityscape-of-dubai.jpg')"></a>
            <h3 class="big-news-title"><a href="">Новости туризма 4</a></h3>
            <span class="big-news-date">14.01.2022</span>
        </div>
        <div class="small-news-wrap">
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://blog.axcapital.ae/wp-content/uploads/sites/5/2021/05/cityscape-of-dubai.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 4</a></h3>
            </div>
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://blog.axcapital.ae/wp-content/uploads/sites/5/2021/05/cityscape-of-dubai.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 4</a></h3>
            </div>
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://blog.axcapital.ae/wp-content/uploads/sites/5/2021/05/cityscape-of-dubai.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 4</a></h3>
            </div>
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://blog.axcapital.ae/wp-content/uploads/sites/5/2021/05/cityscape-of-dubai.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 4</a></h3>
            </div>
        </div>
    </div>

    <div class="news-egipet news-wrap">
        <div class="big-news">
            <a href="#" class="big-news-pic" style="background-image: url('https://geografishka.ru/wp-content/uploads/2019/12/gettyimages-1085205362-1920x1080.jpg')"></a>
            <h3 class="big-news-title"><a href="">Новости туризма 5</a></h3>
            <span class="big-news-date">15.01.2022</span>
        </div>
        <div class="small-news-wrap">
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://geografishka.ru/wp-content/uploads/2019/12/gettyimages-1085205362-1920x1080.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 5</a></h3>
            </div>
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://geografishka.ru/wp-content/uploads/2019/12/gettyimages-1085205362-1920x1080.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 5</a></h3>
            </div>
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://geografishka.ru/wp-content/uploads/2019/12/gettyimages-1085205362-1920x1080.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 5!</a></h3>
            </div>
            <div class="small-news">
                <a href="#" class="small-news-pic" style="background-image: url('https://geografishka.ru/wp-content/uploads/2019/12/gettyimages-1085205362-1920x1080.jpg')"></a>
                <h3 class="small-news-title"><a href="">Новости туризма 5</a></h3>
            </div>
        </div>
    </div>

</section>

javascript

1 个回答

  1. Best Answer

    问题很可能在于额外的操作。
    限制他们检查标志。

    也将事件替换mouseover为mouseenter.

    区别文章mouseover\mouseout和mouseenter\mouseleave-link 。 以及这些事件如何工作的示例 -链接

    function changeCountry() {
  let radio = $('[name="news-radio"]'),
      checked = $('[name="news-radio"]:checked'),
      next = checked.next().index() < $('[name="news-radio"]').length ? checked.next() : radio.eq(0);

  next.prop('checked', true);
}

let timer = setInterval(changeCountry, 2000),
    isPause = false;

$('.news-label-wrap, .big-news, .small-news').on('mouseenter', function(){
  if(isPause === false) {
    isPause = true;
    clearInterval(timer);
    console.info('enter');
  }
});

$('#main-news').on('mouseleave', function(){
  if(isPause === true) {
    isPause = false;
    timer = setInterval(changeCountry, 2000);
    console.info('leave');
  }
});

    重写了函数的机制changeCountry()，现在一切正常。

    完整代码 - jsfiddle

    ps为什么不$('.news-label-wrap, .big-news, .small-news')换成$('#main-news')？🤔

    附言

    在调试器中，我注意到手动切换选项卡时，未将选中属性添加到单选按钮

    而且您不会看到，此操作不会显示在调试器中。而在jQuery中，你需要通过改变这些属性的状态.prop()

    • 4

相关问题