Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.10.2015, 12:15
Интересующийся
Отправить личное сообщение для d1mka21 Посмотреть профиль Найти все сообщения от d1mka21
 
Регистрация: 07.10.2015
Сообщений: 22

Как правильно настроить список
Ребят, помогите настроить правильную работу jquery!
В общем схема такая, есть две кнопки radio, в зависимости от выбранной кнопки должны появляться разный списки, и в зависимости от выбранной позиции в списке выводится картинка и инфа.
С кнопками radio проблем нет(мне уже помогли тут, спасибо большое)
А вот дальше, работает не так и я не пойму почему(результат во вложении картинка №1)
Вот код:
<section id="vehicles" class="container">            
      <div class="col-md-12">
        <h2 class="title wow fadeInDown" data-wow-offset="200">Выбор стеллажа<span class="subtitle"></span></h2>
        <div id="radio">
          <div class="radio_pos">
          <input checked="checked" class="radio" id="radio-1" name="sw" type="radio" value="one">
          <label style="" for="radio-1">Односторонний</label>
          <br><br>
          <input style="" class="radio" id="radio-2" name="sw" type="radio">
          <label style="" for="radio-2">Двухсторонний</label>
          </div>
        </div>
      </div>
       <div id="one" class="row">
        <div class="col-md-3 vehicle-nav-row wow fadeInUp" data-wow-offset="100">
          <div id="vehicle-nav-container">
            <div id="dd" class="wrapper-dropdown-3" tabindex="1">
               <span>Длина</span>
                <ul class="vehicle-nav">
                    <li class="active"><a href="#vehicle-1"><i class="icon-envelope icon-large"></i>1 метр</a></li>
                    <li><a href="#vehicle-2"><i class="icon-truck icon-large"></i>2 метра</a></li>
                </ul>
             </div>          
                  </div>
                </div>
        <div class="vehicle-data" id="vehicle-1" font face="Raleway-ExtraLight">
          <div class="col-md-6 wow fadeIn" data-wow-offset="100">
            <div class="vehicle-img">
              <img class="img-responsive" src="img\metal_shelf\1str\1str1metr.JPG" alt="Vehicle">
            </div>
          </div>
          <div class="col-md-3 wow fadeInUp" data-wow-offset="200">
            <div class="vehicle-price">20000 в‚Ѕ <span class="info">&nbsp;<font face="Raleway-ExtraLight">стоимость</font></span></div>
            <table class="table vehicle-features">
              <tr>
                <td>Масса</td>
                <td>130,4 кг</td>
              </tr>
              <!-- <tr>
                <td>Doors</td>
                <td>4</td>
              </tr>   -->                  
            </table>
            <a href="#teaser" class="reserve-button scroll-to"><span class="glyphicon glyphicon-calendar"></span> Оформить заказ</a>
          </div>
        </div>
        <div class="vehicle-data" id="vehicle-2">
          <div class="col-md-6" data-wow-offset="200">
            <div class="vehicle-img">
              <img class="img-responsive" src="img/metal_shelf/1str/1str2metra.JPG" alt="Vehicle">
            </div>
          </div>
          <div class="col-md-3" data-wow-offset="200">
            <div class="vehicle-price">40000 в‚Ѕ <span class="info">стоимость</span></div>
              <table class="table vehicle-features">
                <tr>
                  <td>Масса</td>
                  <td>232,4кг</td>
                </tr>
                <!-- <tr>
                  <td>Doors</td>
                  <td>4</td>
                </tr> -->
              </table>
              <a href="#teaser" class="reserve-button scroll-to"><span class="glyphicon glyphicon-calendar"></span> Оформить заказ</a>
          </div>
        </div>        
      </div>    
      <div id="two" class="none row">
        <div class="col-md-3 vehicle-nav-row wow fadeInUp" data-wow-offset="100">
          <div id="vehicle-nav-container2">
            <div id="metr" class="wrapper-dropdown-2">
              <span>Не длина</span>
                <ul class="vehicle-nav2">
                  <li class="active"><a href="#vehicle-1"><i class="icon-envelope icon-large"></i>1 метр</a></li>
                  <li><a href="#vehicle-2"><i class="icon-truck icon-large"></i>2 метра</a></li>
                </ul>
            </div> 
          </div>
        </div>
        
        <div class="vehicle-data2" id="vehicle-7">
          <div class="col-md-6" data-wow-offset="200">
            <div class="vehicle-img">
              <img class="img-responsive" src="img/metal_shelf/2str/2str1metr.JPG" alt="Vehicle">
            </div>
          </div>
          <div class="col-md-3" data-wow-offset="200">
            <div class="vehicle-price">120000 в‚Ѕ <span class="info">стоимость</span></div>
            <table class="table vehicle-features">
              <tr>
                <td>Масса</td>
                <td>640,5кг</td>
              </tr>
              <!-- <tr>
                <td>Doors</td>
                <td>4</td>
              </tr>   -->                  
            </table>
            <a href="#teaser" class="reserve-button scroll-to"><span class="glyphicon glyphicon-calendar"></span> Оформить заказ</a>
          </div>
        </div>      
        <div class="vehicle-data2" id="vehicle-8">
          <div class="col-md-6" data-wow-offset="200">
            <div class="vehicle-img">
              <img class="img-responsive" src="img/metal_shelf/2str/2str2metra.JPG" alt="Vehicle">
            </div>
          </div>
          <div class="col-md-3" data-wow-offset="200">
            <div class="vehicle-price">120000 в‚Ѕ <span class="info">стоимость</span></div>
            <table class="table vehicle-features">
              <tr>
                <td>Масса</td>
                <td>640,5кг</td>
              </tr>
              <!-- <tr>
                <td>Doors</td>
                <td>4</td>
              </tr>   -->                  
            </table>
            <a href="#teaser" class="reserve-button scroll-to"><span class="glyphicon glyphicon-calendar"></span> Оформить заказ</a>
          </div>
        </div>                      
       
        <!--end 2 str -->
      </div>
    </section>               
     <script src="js/custom.js"></script> 
      <script type="text/javascript">     
        function DropDown(el) {
          this.dd = el;
          this.placeholder = this.dd.children('span');
          this.opts = this.dd.find('ul.vehicle-nav > li');
          this.val = '';
          this.index = -1;
          this.initEvents();
        }
        DropDown.prototype = {
          initEvents : function() {
            var obj = this;
             obj.dd.on('click', function(event){
              $(this).toggleClass('active');
              return false;
            }); 
            obj.opts.on('click',function(){
              var opt = $(this);
              obj.val = opt.text();
              obj.index = opt.index();
              obj.placeholder.text(obj.val);
              $('.wrapper-dropdown-3').removeClass('active');
              obj.index = opt.index();              
            });
          },
          getValue : function() {
            return this.val;
          },
          getIndex : function() {
            return this.index;
          }
        }
        $(function() {
          var dd = new DropDown( $('#dd') );
          var dd = new DropDown( $('#metr') );
          $(document).click(function() {
            // all dropdowns
            $('<div class="wrapper-dropdown-3"></div>').removeClass('active');            
          });
        }); 
        $(document).ready(function(){
          $('input[name=sw]').click(function(){
            var v = ($(this).val());
            console.log(v);
            if(v === 'one'){
              $('#one').show();
              $('#two').hide();
            }
            else{
              $('#one').hide();
              $('#two').show();
            }
          })
        })
        </script>  
   </body>
</html>

скрипт для отображения картинки и инфы
$(".vehicle-data").hide();
var activeVehicleData = $(".vehicle-nav .active a").attr("href");
$(activeVehicleData).show();
$('.vehicle-nav-scroll').click(function(){
    var direction = $(this).data('direction');
    var scrollHeight = $('.vehicle-nav li').height() + 1;
    var navHeight = $('#vehicle-nav-container').height() + 1;
    var actTopPos = $(".vehicle-nav").position().top;
});
$(".vehicle-nav li").on("click", function(){
  $(".vehicle-nav .active").removeClass("active");
  $(this).addClass('active');
  $(activeVehicleData).fadeOut( "slow", function() {
    activeVehicleData = $(".vehicle-nav .active a").attr("href");
    $(activeVehicleData).fadeIn("slow", function() {});
  });
  return false;
});
 //two//
$(".vehicle-data2").hide();
var activeVehicleData = $(".vehicle-nav2 .active a").attr("href");
$(activeVehicleData).show();
$('.vehicle-nav2-scroll').click(function(){
    var direction = $(this).data('direction');
    var scrollHeight = $('.vehicle-nav2 li').height() + 1;
    var navHeight = $('#vehicle-nav-container').height() + 1;
    var actTopPos = $(".vehicle-nav2").position().top;
});
$(".vehicle-nav2 li").on("click", function(){
  $(".vehicle-nav2 .active").removeClass("active");
  $(this).addClass('active');
  $(activeVehicleData).fadeOut( "slow", function() {
    activeVehicleData = $(".vehicle-nav2 .active a").attr("href");
    $(activeVehicleData).fadeIn("slow", function() {});
  });
return false;
});

При таком написании кода, нет отображения картинки и инфы со второго списка.
Изображения:
Тип файла: jpg картинка №1.jpg (2.3 Кб, 0 просмотров)
Тип файла: jpg картинка №2.jpg (7.4 Кб, 0 просмотров)
Вложения:
Тип файла: zip website.zip (7.34 Мб, 0 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 07.10.2015, 12:16
Интересующийся
Отправить личное сообщение для d1mka21 Посмотреть профиль Найти все сообщения от d1mka21
 
Регистрация: 07.10.2015
Сообщений: 22

А если поставить
<div id="two" class="none row">
        <div class="col-md-3 vehicle-nav-row wow fadeInUp" data-wow-offset="100">
          <div id="vehicle-nav-container2">
            <div id="metr" class="wrapper-dropdown-2">
              <span>Не длина</span>
                <ul class="vehicle-nav2">
                  <li class="active"><a href="#vehicle-7"><i class="icon-envelope icon-large"></i>1 метр</a></li>
                  <li><a href="#vehicle-8"><i class="icon-truck icon-large"></i>2 метра</a></li>
                </ul>
            </div> 
          </div>
        </div>

href="#vehicle-7 и href="#vehicle-8 вместо href="#vehicle-1 и href="#vehicle-2 соответственно, то результат (результат во вложении картинка №2)

Сам сайт только на локалке, во вложении архив.
Подскажите, пожалуйста, где натупил)
Заранее благодарен, за любую помощь!!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 13:25
Как правильно прописать полученные значения с сервера? Dimaz jQuery 0 07.12.2012 17:46
Ext.form.ComboBox, как принудительно обнулить выпадающий список? martinelli ExtJS 4 10.07.2012 11:23
Как правильно очистить maxlength в input? Маэстро Events/DOM/Window 10 22.06.2011 17:14
Как правильно скопировать выпадающий список <select ... diiimonn Элементы интерфейса 1 13.06.2011 08:23