jQuery класс и дисплей изменение.

Я пытаюсь сделать 1 форму на нескольких экранах whit 1 кнопку отправки. Это то, что я получил так далеко, но я застрял в jquery и надеялся, что кто-то может помочь мне сказать, что я делаю неправильно здесь. неjQuery класс и дисплей изменение.

<html> 
<body> 
    <form action="" method="post"> 
    <ul id="stappen"> 
     <li id="step_1" class="selected">1. step_1</li> 
     <li id="step_2" class="">2. step_2</li> 
     <li id="step_3" class="">3. step_3</li> 
     <li id="step_4" class="">4. step_4</li> 
    </ul> 
    <div id="stappen"> 
     <div id="content_step_1" class="content_step" style="display: block;">content step 1</div> 
     <div id="content_stap_2" class="content_step" style="display: none;">content step 2</div> 
     <div id="content_stap_3" class="content_step" style="display: none;">content step 3</div> 
     <div id="content_stap_4" class="content_step" style="display: none;">content step 4</div> 
    </div> 
    </form> 
</body> 
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script> 
    <script> 
    (function() { 
     var body = $('body'); 
     $('.step_2').bind('click', function(){ 
      body.toggleClass('step_2'); 
      return false; 
     }); 
    })(); 
</script> 
</html>

Дело, что я wan't сделать это: Когда литий step_2 нажата литий ID = «step_2» класс = «» - изменения «класс» в «выбран» и «» изменения «дисплей никто "to" block ", как в этом коде, находится в момент выбора шага 1 и отображения: block.Afther все это изменяет все, начиная с шага 1, должно быть таким же, как и все остальное :) -> class empty и display to none.

Я знаю, что есть что-то не так, как с кодом jquery, но я не знаю, как это сделать. Каждой попытке я сделал преобразование в ошибке или не работаю, вот почему ifilled в скрипте, который я знаю, является частично хорошим.

Я надеюсь, что кто-то может мне помочь и/или указать мне в правильном направлении.

thnx в продвинутом состоянии.

источник

2015-11-17 hexedecimal

Я думаю, вам нужно больше узнать о селекторах jquery. В коде вы привязываете событие click к классу, который не существует $ ('. Step_2'). Bind ('click', function() {}); все ваши лики не имеют классов. Начните там ... – Zorken17

Как говорит @Ricardo, вы не можете использовать тот же идентификатор, как для UL как для DIV. Вы должны это исправить. Вот пример улучшения вам версия коды: HTML

<body> 
     <form action="" method="post"> 
     <ul id="ul_stappen"> 
      <li id="step_1" class="selected">1. step_1</li> 
      <li id="step_2" class="">2. step_2</li> 
      <li id="step_3" class="">3. step_3</li> 
      <li id="step_4" class="">4. step_4</li> 
     </ul> 
     <div id="div_stappen"> 
      <div id="content_step_1" class="content_step" style="display: block;">content step 1</div> 
      <div id="content_stap_2" class="content_step" style="display: none;">content step 2</div> 
      <div id="content_stap_3" class="content_step" style="display: none;">content step 3</div> 
      <div id="content_stap_4" class="content_step" style="display: none;">content step 4</div> 
     </div> 
     </form> 
    </body>

CSS

.selected{color:red}

JAVSCRIPT

(function() { 
      $('#ul_stappen>li').on('click',function(){ 
       if(!$(this).hasClass('selected')){ 
       $('.selected').removeClass('selected'); 
       $(this).addClass('selected'); 
       $('#div_stappen>div').filter(function(){return $(this).css('display')==='block'}).hide(); 
       $('#div_stappen>div').eq($(this).index()).show(); 
       } 
      }); 

    })();

И Working JSFIDDLE example

Надеется, что это поможет вам

источник

2015-11-17 15:04:19 AlexBerd

thnx для ваших советов и примера, теперь я вижу, что я сделал не так. также thnx Виджай и Риккардо. Я проголосовал за это как ответ из-за скрипки для дальнейших ссылок для других пользователей. – hexedecimal

Вам не следует повторять идентификаторы в HTML. Идентификатор "stappen" повторяется как для UL, так и для DIV ниже.

Предположим, что UL идентификатор "ul_stappen" и ДИВ идентификатор "div_stappen":

<ul id="ul_stappen"> 
... 
</ul> 

<div id="div_stappen"> 
.. 
</div>

Теперь мы можем achive ваш нужный эффект с кодом JQuery ниже:

$('#ul_stappen').on('click', 'li', function() { 
    if ($(this).hasClass('selected')) { 
     return; 
    }; 

    // show hide proper content divs 
    var oldIndex = $ulStappen.find('selected').index(); 
    var newIndex = $(this).index(); 
    $('#div_stappen li').eq(oldIndex).hide(); 
    $('#div_stappen li').eq(newIndex).show(); 

    // add/remove 'selected' for proper li's 
    // this must be the last part to be done 
    $('#ul_stappen').find('selected').removeClass('selected'); 
    $(this).addClass('selected'); 
});

Удачи , повеселись!

источник

2015-11-17 14:49:33

Первый выпуск: у вас есть два элемента с одинаковым идентификатором (степью). Это ошибка. Чтобы мой код работал, вам нужно изменить идентификатор второго элемента в «steppendiv». Вторая проблема: первый идентификатор содержимого - шаг, а остальные три - stAp (с «a» вместо «e»). Для моего кода для работы вам необходимо изменить их и сделать все «content_step_1» (_2 _3 и так далее)

$(document).ready(function() { 
    $("#stappen").on("click", "li", function() { 
     $("#stappen li").removeClass("selected"); 
     $(this).addClass("selected"); 
     var liId = $(this).attr("id"); 
     var splittedId = liId.split("_"); 
     var newId = "#content_step_" + splittedId[ 1 ]; 
     $("#stappendiv > div").hide(); 
     $(newId).show(); 
    }); 
});

источник

2015-11-17 14:49:46 RiccardoC

jQuery класс и дисплей изменение.

ответ

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