jQuery Как добавить класс в следующий iframe?

У меня есть три iframe элементов с первым видимым, а все остальные имеют стиль display:none. То, что видно, имеет класс «видимый». Когда нажимается «следующая» кнопка, я хочу, чтобы следующий iframe отображался, а предыдущий iframe был скрыт.jQuery Как добавить класс в следующий iframe?

Так я попытался с помощью addClass и removeClass но addClass не похоже на работу:

$(document).ready(function(){ 

    $("#next").click(function(){ 

    $(".visible").next().show(); 
    $(".visible").next().addClass("visible"); 
    $(".visible").hide(); 
    $(".visible").removeClass("visible"); 

    }); 

});

элементы являются:

<iframe class="iframe visible" src="a.html" width="100%" scrolling="auto" frameborder="0"></iframe> 
<iframe class="iframe" src="b.html" width="100%" scrolling="auto" frameborder="0"></iframe> 
<iframe class="iframe" src="c.html" width="100%" scrolling="auto" frameborder="0"></iframe>

removeClass() Почему работа и addClass() не делает?

источник

2014-02-02 Tom

Является ли это фактическая HTML или есть элементы/теги между ними? Вы должны быть уверены в «DOM traversal» здесь! – loveNoHate

сделать это так, вместо

$(document).ready(function() { 
    $("#next").click(function() { 
     $('.visible').removeClass('visible').hide().next().show().addClass('visible'); 
    }); 
});

Прямо сейчас вы добавляете класс .visible к следующему элементу и на следующей строке вы скрываете все элементы с этим классом, см комментировал версию кода ниже

$(".visible").next().show();    // show the next one 
$(".visible").next().addClass("visible"); // add .visible class to the next one 
$(".visible").hide();   // -- > now you're hiding both the next and current 
$(".visible").removeClass("visible");  // and then you're removing the class

FIDDLE

источник

2014-02-02 17:23:01 adeneo

Хорошо, вам нужно вернуться к jQuery collection selector 101 здесь. ;) – loveNoHate

@ dollarvar На самом деле это довольно просто. Сначала найдите элемент, сделайте что-нибудь с ним (спрячьте, добавьте класс), затем уточните свой выбор с помощью селектора 'next()' и сделайте что-нибудь с элементом * that *. –

@BramVanroy Ну, я подумал, как '.next()' коллекции '$ ('. Visible')' может быть нацелен на следующий 'iframe'. Но похоже, что jQuery выбирает следующий 'sibling' на основе того же HTML-элемента здесь. – loveNoHate

Это работает! но вы делаете первый и 2-й плавающие фреймы видны, а затем скрыть их обоих и удалить класс от них обоих

источник

2014-02-02 17:22:45 vladkras

jQuery Как добавить класс в следующий iframe?

ответ

Смежные вопросы