Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Условие JQuery (https://javascript.ru/forum/jquery/61415-uslovie-jquery.html)

Heny 17.02.2016 13:49
Условие JQuery
 
Уважаемые гуру, подскажите, что делаю не то. Пишу так:
<script>
(function($) {
$(function() {
	
$( "div.radio" ).on( "click", function() {	
	
	
	if($("#s1").is(":checked")) {
		  $('ul.color').on('click', 'li', function() {
			      $(this)
				  .addClass('active').siblings().removeClass('active')
				  .closest('div.3d').find('.sm-v div.image').removeClass('active').eq($(this).index()).addClass('active');
		  });
	} 
	else if ($("#s2").is(":checked")) {
		  $('ul.color').on('click', 'li', function() {
			      $(this)
				  .addClass('active').siblings().removeClass('active')
				  .closest('div.3d').find('.sp-v div.image').removeClass('active').eq($(this).index()).addClass('active');
		  });
	} 
	else if ($("#s3").is(":checked")) {
		  $('ul.color').on('click', 'li', function() {
			      $(this)
				  .addClass('active').siblings().removeClass('active')
				  .closest('div.3d').find('.sp-v div.image').removeClass('active').eq($(this).index()).addClass('active');
		  });
	}
	
});


});
})(jQuery);

</script>


Это условия для чекнутых радиобатаннов, они срабатывают, но когда я возвращаюсь и кликаю например снова на #s1 (после s2/s3), то не выполняется условие .find('.sm-v div.image'), а так и продолжает выполняться .find('.sp-v div.image'). Подскажите, что не так.

laimas 17.02.2016 14:19
Покажите код кнопок, включая родителей и прочих к которым обращение.

else if ($("#s3").is(":checked")) - меняя только селектор, и опять id (!), а действия одинаковые, так не стоит делать.

Heny 18.02.2016 07:16
Цитата:
Сообщение от laimas (Сообщение 408167)
else if ($("#s3").is(":checked")) - меняя только селектор, и опять id (!), а действия одинаковые, так не стоит делать.
Пробовала объединить && - не работал код, наверное потому что коряво писала)))

Код:
<div class="radio">
<input type="radio" name="gender" id="s1" value="Металл"><label for="s1">Металл</label>
<input type="radio" name="gender" id="s2" value="Пластик импортный"><label for="s2">Пластик импортный</label>
<input type="radio" name="gender" id="s3" value="Пластик российский"><label for="s3">Пластик российский</label>
</div>

<ul class="color"> 
 <li id="1013"><img src="/multifile/2678/1013.png"></li>
 <li id="1015"><img src="/multifile/2678/1015.png"></li>
 <li id="1019"><img src="/multifile/2678/1019.png"></li>
 <li id="2009"><img src="/multifile/2678/2009.png"></li>
</ul>

Heny 18.02.2016 09:28
Все получилось, когда поправила так:
if($("#s1").is(":checked")) {
		  $('ul.color').on('click', 'li', function() {
			      $('.3d').find('div.sm-v div.image').removeClass('active').eq($(this).index()).addClass('active');
			      $('.3d').find('div.sp-v div.image').removeClass('active');
		  });
	} 
	else if ($("#s2").is(":checked")) {
		  $('ul.color').on('click', 'li', function() {
			      $('.3d').find('div.sp-v div.image').removeClass('active').eq($(this).index()).addClass('active');
			      $('.3d').find('div.sm-v div.image').removeClass('active');

		  });
	};


:dance: :victory: :D :write:

рони 18.02.2016 10:34
Heny,
попробуйте никогда не назначать клик в клике и вы спасёте ресурсы браузера и клиента

Heny 18.02.2016 14:16 
if($("#s1").is(":checked")) {
          $('ul.color').on('click', 'li', function() {

так нельзя?

Почему-то вся данная конструкция не работает в IE((( Не подскажете в чем загвоздка?

рони 18.02.2016 14:23
Цитата:
Сообщение от Heny
так нельзя?
так ненужно
лучше опишите алгоритм того что хотите сделать

Heny 19.02.2016 15:33
Так наверное лучше посмотреть?
вот тут сижу ковыряю
http://www.laminar.ru/test/test-6.html

Heny 20.02.2016 07:24
А не работает вот это:
else if ($("#s2, #s3").is(":checked")) {

Как надо написать для IE?

рони 20.02.2016 17:24
Heny,
если клик по ссылке отмените переход, если сто раз назначаите клик , отмените предыдущие клики.

<script>
(function($) {

$(function() {
	$('ul.btn').on('click', 'li:not(.active)', function(event) {
	  event.preventDefault();
			$('.3d').find('div.variant div.el').removeClass('active').eq($(this).index()).addClass('active');
	});

});

})(jQuery);
</script>
<script>
(function($) {
$(function() {

$( "div.radio" ).on( "click", function() {


    if($('#pol1').is(":checked")) {
			      $('#pol').find('div.panel2').removeClass('el1');
			      $('#pol').find('div.panel22').addClass('el1');
                  $('ul.color2').off().on('click', 'li', function(event) {  event.preventDefault();
			        $('.konf3d').find('div.pl div.image').removeClass('active').eq($(this).index()).addClass('active');
			        $('.konf3d').find('div.pn div.image').removeClass('active');
                  });
	}
    else if($('#pol2').is(":checked")) {
			      $('#pol').find('div.panel22').removeClass('el1');
			      $('#pol').find('div.panel2').addClass('el1');
                  $('ul.color3').off().on('click', 'li', function(event) {  event.preventDefault();
			        $('.konf3d').find('div.pn div.image').removeClass('active').eq($(this).index()).addClass('active');
			        $('.konf3d').find('div.pl div.image').removeClass('active');
                  });
	};
	if($("#s1").is(":checked")) {
		  $('ul.color').off().on('click', 'li', function(event) {  event.preventDefault();
			      $('.3d').find('div.sm-v div.image').removeClass('active').eq($(this).index()).addClass('active');
			      $('.3d').find('div.sp-v div.image').removeClass('active');
		  });
	}
	else if ($("#s2:checked, #s3:checked").length) {
		  $('ul.color').off().on('click', 'li', function(event) {    event.preventDefault();
			      $('.3d').find('div.sp-v div.image').removeClass('active').eq($(this).index()).addClass('active');
			      $('.3d').find('div.sm-v div.image').removeClass('active');

		  });
	};

});


});
})(jQuery);

</script>

Heny 24.02.2016 08:57
Спасибо!!! Помогло) :thanks:

Heny 02.03.2016 10:36
А еще вопрос. Если делать то же самое с инпутами, то срабатывает почему-то через один
$('#dveri').on('change', 'input', function(event) { event.preventDefault();
			      $('.konf3d').find('div.dv div.image').removeClass('active').eq($(this).index()).addClass('active');
	});


Что не так?

Heny 04.03.2016 09:53
Так и не разобралась никак((( Может кто-то всетаки подскажет?
HTML:
<div class="dv">
      <div class="image"><img src="/netcat_files/multifile/2694/1_b.png"></div><div class="image active"><img src="/netcat_files/multifile/2694/2_b.png"></div><div class="image"><img src="/netcat_files/multifile/2694/3_b.png"></div><div class="image"><img src="/netcat_files/multifile/2694/4_b.png"></div>      </div>

<div class="radio" id="dveri"><h4 class="widget-title2">Двери</h4>
            <input type="radio" name="gender4" value="Распашная двухстворчатая" id="d1"><label class="ob" for="d1">Распашная двухстворчатая</label><input type="radio" name="gender4" value="Распашная одностворчатая" id="d2"><label class="ob" for="d2">Распашная одностворчатая</label><input type="radio" name="gender4" value="Раздвижная двухстворчатая" id="d3"><label class="ob" for="d3">Раздвижная двухстворчатая</label><input type="radio" name="gender4" value="Раздвижная одностворчатая" id="d4"><label class="ob" for="d4">Раздвижная одностворчатая</label>      
          </div>


JQuery:
$('input[name*=gender4]').change(function () {
                  $('.dv').find('.image').removeClass('active').eq($(this).index()).addClass('active');
    });


Событие происходит только при нажатии на два из инпунтов, другие два никак не реагируют, что я только не испробовала :-E

рони 04.03.2016 10:00
Heny,
надо упростить алгоритм ... иначе врятли кто подскажет

Heny 04.03.2016 11:38
:( как?

Heny 04.03.2016 11:48
счас код такой:
<script>
(function($) {

$(function() {
	$('ul.btn').on('click', 'li:not(.active)', function(event) {
	  event.preventDefault();
			$('.3d').find('div.variant div.el').removeClass('active').eq($(this).index()).addClass('active');
	});

});

$(function() {

$( "div.radio" ).on( "click", function() {


    if($('#pol1').is(":checked")) {
			      $('#pol').find('div.panel2').removeClass('el1');
			      $('#pol').find('div.panel22').addClass('el1');
                  $('ul.color2').off().on('click', 'li', function(event) {  event.preventDefault();
			        $('.konf3d').find('div.pl div.image').removeClass('active').eq($(this).index()).addClass('active');
			        $('.konf3d').find('div.pn div.image').removeClass('active');
                  });
	}
    else if($('#pol2').is(":checked")) {
			      $('#pol').find('div.panel22').removeClass('el1');
			      $('#pol').find('div.panel2').addClass('el1');
                  $('ul.color3').off().on('click', 'li', function(event) {  event.preventDefault();
			        $('.konf3d').find('div.pn div.image').removeClass('active').eq($(this).index()).addClass('active');
			        $('.konf3d').find('div.pl div.image').removeClass('active');
                  });
	};
	if($("#s1").is(":checked")) {
		  $('ul.color').off().on('click', 'li', function(event) {  event.preventDefault();
			      $('.3d').find('div.sm-v div.image').removeClass('active').eq($(this).index()).addClass('active');
			      $('.3d').find('div.sp-v div.image').removeClass('active');
		  });
	}
	else if ($("#s2:checked, #s3:checked").length) {
		  $('ul.color').off().on('click', 'li', function(event) {    event.preventDefault();
			      $('.3d').find('div.sp-v div.image').removeClass('active').eq($(this).index()).addClass('active');
			      $('.3d').find('div.sm-v div.image').removeClass('active');

		  });
	};
	
    if($("#pot1").is(":checked")) {
			      $('.konf3d').find('div.pbt div.image').removeClass('active');
			      $('.konf3d').find('div.pt div.image').addClass('active');
	}
    else if($('#pot2').is(":checked")) {
			      $('.konf3d').find('div.pt div.image').removeClass('active');
			      $('.konf3d').find('div.pbt div.image').addClass('active');
     }; 
    
}); 
    
    $('ul.color4').on('click', 'li', function(event) {  event.preventDefault();
			      $('.3d').find('div.plin div.image').removeClass('active').eq($(this).index()).addClass('active');
	}); 
    $('input[name*=gender4]').change(function () {
                  $('.3d').find('div.dv div.image').removeClass('active').eq($(this).index()).addClass('active');
    });
    
    

});
})(jQuery);

</script>

и не работает этот кусок:
$('input[name*=gender4]').change(function () {
                  $('.3d').find('div.dv div.image').removeClass('active').eq($(this).index()).addClass('active');
    });

Heny 04.03.2016 12:28
меняю значит 
$('input[name*=gender4]').change(function () {
                  $('.3d').find('div.dv div.image').removeClass('active').eq($(this).index()).addClass('active');
    });

на 
$('input[name*=gender4]').change(function () {
                  $('.3d').find('div.dv div.image').removeClass('active').eq($(this).index()).addClass('active');
    });

ну соответственно инпуты в html изменила на списки, и все заработало.
А мне надо, чтоб работали именно радио-кнопки :cray:


Часовой пояс GMT +3, время: 22:23.