Как правильно настроить список
Вложений: 3
Ребят, помогите настроить правильную работу 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"> <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;
});
При таком написании кода, нет отображения картинки и инфы со второго списка. |
А если поставить
<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) Сам сайт только на локалке, во вложении архив. Подскажите, пожалуйста, где натупил) Заранее благодарен, за любую помощь!! |
| Часовой пояс GMT +3, время: 12:30. |