Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Я честно сделал все сам! вот мой код - посмотрите (https://javascript.ru/forum/dom-window/50940-ya-chestno-sdelal-vse-sam-vot-mojj-kod-posmotrite.html)

ViRuSreloaded 17.10.2014 16:48

Я честно сделал все сам! вот мой код - посмотрите
 
<script type="text/javascript">
$(document).ready(function() {
	$('li').click(function() {

		if ( $(this).hasClass('small') && !($(this).hasClass('reworked')) ) { // Если этот <li> "маленький" и если он НЕ "обработан", то:
			$('.now_u_are_big').removeClass('big'); // Убираем у присвоенного ранее класс "большой"
			$('.now_u_are_big').addClass('small'); // Ставим ему класс "маленький"
			$(this).removeClass('small'); // У текущего убираем "маленький"
			$(this).addClass('big'); // Ставим ему "большой"
			$(this).addClass('now_u_are_big'); // Присваеваем уме класс "теперь ты большой"
			$(this).addClass('reworked'); // Присваеваем ему класс "обработан"
		};
		if ( $(this).hasClass('big') && !($('li').hasClass('reworked')) ) {
			$(this).removeClass('big');
			$(this).addClass('small');
			$(this).addClass('reworked');
		};

	$('li').removeClass('reworked'); // Убираем класс "обработан", а то его потом не обработаешь :)

     });
});
</script>


сам сайт здесь: test.stdmed.ru

кстати из-за того, что на сайте переход по якорям (плавный скролл):
<script type="text/javascript">
$(document).ready(function() {
 
$('a[href^="#"]').click(function(){
        var el = $(this).attr('href');
        $('body').animate({
            scrollTop: $(el).offset().top}, 1000);
        return false; 
});
    
});
</script>

... то при клике на <li> перекидывает на ТОП страницы что не есть гуд :-?
HTML-разметка:
<section>
				<ul id="da-thumbs" class="da-thumbs">
					<li class='small'>
						<a href="#">
							<img src="images/1.jpg" />
							<div><span>Елизавета няша...</span></div>
						</a>
					</li>
					<li class='small'>
						<a href="#">
							<img src="images/2.jpg" />
							<div><span>Елизавета няша...</span></div>
						</a>
					</li>
					<li class='small'>
						<a href="#">
							<img src="images/3.jpg" />
							<div><span>Елизавета няша...</span></div>
						</a>
					</li>

... и так далее

danik.js 17.10.2014 17:25

Цитата:

Сообщение от ViRuSreloaded
то при клике на <li> перекидывает на ТОП страницы что не есть гуд

Ну а действительно, нафига ты прописываешь пустой якорь?

ViRuSreloaded 17.10.2014 17:32

на <a> привязан элемент анимации (серая плашка), при наведении появляющаяся. А вот как пустую гиперссылку прописать не придумал я... Прописывал на #portfolio чтобы экран на фотогалерее фокусировался, но не работает окаянный скрипт первый тогда... Прямо как у Йоды получилось :)

danik.js 17.10.2014 17:43

href="javascript:"

Хотя почему
Цитата:

Сообщение от ViRuSreloaded
не работает окаянный скрипт первый

не знаю..

ViRuSreloaded 17.10.2014 18:12

Цитата:

Сообщение от danik.js
href="javascript:"

работает :) спасибо, мил человек.

А как код, то? Не усложнил ли я его ненужными условиями?

ViRuSreloaded 17.10.2014 18:18

<script type="text/javascript">
$(document).ready(function() {
	$('li').click(function() {
			$('li').removeClass('big'); // Убираем у всех класс "большой"
			$('li').addClass('small'); // Присваиваем всем класс "маленький"
			$(this).addClass('big'); // Ставим текущему класс "большой"
     });
});
</script>


Вот так по-моему наряднее?

utb 18.10.2014 16:26

Вроде должно работать
<script type="text/javascript">
$(document).ready(function() {
  $('li').click(function(e) {
    e.preventDefault();
    if ($(this).hasClass('big')) { // если открыт
      // просто закрываем
      $(this).removeClass('big'); // Убираем класс "большой"
    } else { // если он закрыт
    // вероятно есть открытый
    // закрываем вероятно открытые
       $('li.small').removeClass('big'); // Убираем у всех класс "большой"
    // открываем текущий
       $(this).addClass('big'); // Ставим текущему класс "большой"
   }
     });
});
</script>


Зачем удалять или добавлять класс small ? переопределяй стили и ок

Vlasenko Fedor 18.10.2014 17:55

а если сократить то можно и так :)
(function(f){    
    f('li').on('click', function () {
        f(this).toggleClass('big').siblings().removeClass('big'); 
    });
}(jQuery));

krasovsky 20.10.2014 08:04

$('a[href^="#"]') -когда делаешь так, будь готов к тому что придется делать костыли потом.
Почему бы минимально не персонализировать свой обработчик? Что бы он охватывал нужную часть интерфейса а не все подряд - $('.anchor') - вот один класс "якорей" и никаких проблем

Кроме того в разметке какую роль выполняет тег a? Если роль контейнера то используй div, если совсем уж нет возможности, то по краqней мере убрать у него атрибут href

danik.js 20.10.2014 08:33

Цитата:

Сообщение от krasovsky
$('.anchor') - вот один класс "якорей" и никаких проблем

Но ведь href^="#" уже определяет все якоря. Зачем усложнять? Просто не нужно использовать якоря как не-якоря, вот и все)

Цитата:

Сообщение от krasovsky
если совсем уж нет возможности, то по краqней мере убрать у него атрибут href

Тогда вообще нет смысла в <a>. Ибо курсора-указателя не будет а, элемент не сможет получать фокус. Т.е. <a> не будет отличаться от <span>

Как лучше, в порядке приоритета:
1) Использовать <button>
2) Использовать <a href="javascript:">
3) Использовать <span tabindex="0">, но придется самому навешивать обработчик keydown:keyCode=13, вызывающий this.click() (для ссылок и кнопок за нас это делает браузер)


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