Изменить цвет фона divs в следующем div нажмите

У меня есть div, каждый div имеет другой цвет фона. Основываясь на каждом якоре, я нажимаю на некоторые из divs, и они отображаются. Моя проблема в том, что когда я нажимаю на якорь с id=next, который показывает следующий div, я не могу изменить цвет фона, я создал функцию, но она не работает, может ли кто-нибудь помочь мне исправить это?Изменить цвет фона divs в следующем div нажмите

Мой jsfiddle: DEMO

Мой HTML код:

<body> 
<div class="info-right-div" id="right-info1" style="display: block;"> 
    <p> div-1- <br/> Content of div 1: color is YELLOW </p> 
</div> 
<div class="info-right-div" id="right-info2" style="display: none;"> 
    <p> div-2- <br/> Content of div 2 : color is RED </p> 
</div> 
<div class="info-right-div" id="right-info3" style="display: none;"> 
    <p> div-3- <br/> Content of div 3: color i GRAY </p> 
</div> 
<br /><br /> <br /> 
<a id="info1" href="#"> show div 1</a> 
<a id="info2" href="#"> show div 2</a> 
<a id="info3" href="#"> show div 3</a> 
<a id="next" href="#"> next div</a> 
<br /><br /> <br /> 

</body>

Мой JQuery код:

$(document).ready(function() { 
jQuery("a").click(function() { 
     var id = jQuery(this).attr("id"); 
     switch (true) { 
     case (id == 'info1') : 
      $(".info-right-div").hide(); 
      $('#right-info1').show(); 
      $("body").css('background-color', '#FFFF00'); 
      break; 
     case (id == 'info2'): 
      $(".info-right-div").hide(); 
      $('#right-info2').show(); 
      $("body").css('background-color', '#FF0000'); 
      break; 
     case (id == 'info3'): 
      $(".info-right-div").hide(); 
      $('#right-info3').show(); 
      $("body").css('background-color', '#00FF00'); 
      break; 
     case(id == 'next'): 
      var div1vis = $(".info-right-div").filter(':visible'); 
      var id = jQuery(this).attr("id"); 
      if (div1vis.next().length > 0) { 
       div1vis.next().show().prev().hide(); 
       var nextid = div1vis.prev().attr("id"); 
       changebackground(nextid); 
      } 
      break; 
    }; 
}); 
}); 


function changebackground(divid) { 
    if (divid == 'right-info1') { $("body").css('background-color', '#FFFF00'); } 
    if (divid == 'right-info1') { $("body").css('background-color', '#FF0000'); } 
    if (divid == 'right-info1') { $("body").css('background-color', '#00FF00'); } 
}

Когда я нажимаю на якорь с идентификатором next с var nextid = div1vis.prev().attr("id"); я попытался взять идентификатор div, который отображается.

источник

2015-10-10 Anonymous

Вы должны взглянуть на синтаксисе переключатель - коммутатор должен быть идентификатор, случаи являются строки. Я обновил вашу скрипту https://jsfiddle.net/1yscy5ts/7/ –

@ axel.michel, но все же цвет фона остается тем же самым для divs при нажатии следующего якоря? –

yep, в вашей разметке нет id, как «left-info1», только правая информация - поэтому нет изменения цвета. –

Вы принимаете undefined до changebackground, если выбрано первое div, так как нет div1vis.prev(). Вы, вероятно, нужно div1vis.next():

if (div1vis.next().length > 0) { 
    div1vis.next().show().prev().hide(); 
    // Fix: 
    var nextid = div1vis.next().attr("id"); 
    changebackground(nextid); 
}

Идентификаторы: right-info1, right-info2, right-info3:

function changebackground(divid) { 
    if (divid == 'right-info1') { $("body").css('background-color', '#FFFF00'); } 
    if (divid == 'right-info2') { $("body").css('background-color', '#FF0000'); } 
    if (divid == 'right-info3') { $("body").css('background-color', '#00FF00'); } 
}

источник

2015-10-10 20:28:16

спасибо за ваш ответ, но я попробовал это в jsfiddle, но он не работает! –

@Egzontina Какая ссылка? Здесь он работает https://jsfiddle.net/7kvpew9r/ –

Также можно перейти от '3' к' 1', если нажата кнопка 'next': https://jsfiddle.net/7kvpew9r/1/ –

Что делать, если вы пытаетесь с помощью числовых индексов для достижения текущего цвета и идентификатор?

Попробуйте

var ids = { 1:'right-info1', 2:'right-info2', 3:'right-info3'}; 
// ... code of the click event here 
// more code of the case control structure 
    case(id == 'next'): 
     if (current >= 4) {current--;} else { 
     $(".info-right-div").hide(); 
     $("#"+ids[current]).show(); 
     changebackground(current); } 
     break; 
}; 
// function that change colors 
function changebackground(divid) { 
if (divid == 1) { $("body").css('background-color', '#FFFF00'); } 
if (divid == 2) { $("body").css('background-color', '#FF0000'); } 
if (divid == 3) { $("body").css('background-color', '#00FF00'); } }

Вы можете найти полный код здесь https://jsfiddle.net/1yscy5ts/13/

источник

2015-10-10 20:39:22 cnexans

проверить это. Это другой подход, но он делает то же самое https://jsfiddle.net/8k3kp6uu/1/

HTML

<div class="background-divs green active"></div> 
<div class="background-divs blue"></div> 
<div class="background-divs yellow"></div> 

<ul class="links"> 
    <li><a class="link" data-background="green" href="">GREEN</a></li> 
    <li><a class="link" data-background="blue" href="">BLUE</a></li> 
    <li><a class="link" data-background="yellow" href="">YELLOW</a></li> 
    <li><a class="next" href="link" href="">NEXT</a></li> 
</ul>

$('.link').click(function(e) { 
    e.preventDefault(); 
    var color = $(this).attr('data-background'); 

    $('.background-divs').removeClass('active'); 
    $('.background-divs.'+color).addClass('active'); 

}); 

$('.next').click(function(e) { 
    e.preventDefault(); 

    var next = $('.background-divs.active'); 
    var first = $('.background-divs').first(); 
    var last = next.last(); 
    next.removeClass('active').next().addClass("active"); 
    if(next.is(last)) { 
     next.removeClass('active'); 
     first.addClass('active'); 
    } 
});

источник

2015-10-10 21:18:01

Изменить цвет фона divs в следующем div нажмите

ответ

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