Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

Помогите правильно оформить jQuery.

Константин Ефименко Гуру (3721), закрыт 4 года назад
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function Loc() {
if ($('.active') && $('.ru')) {window.location.replace("mysite.php?lang=ru")}
if ($('.active') && $('.kz')) {window.location.replace("mysite.php?lang=kz")}
if ($('.active') && $('.en')) {window.location.replace("mysite.php?lang=en")}
}
$(document).ready(function(){
let link = $('.link');
for(let i = 0; i < link.length; i++){
link[i].addEventListener('click', function(){
for(let u = 0; u < link.length; u++){
link[u].classList.remove('active');
}
this.classList.add('active');
$(".active").click(Loc);
});
}
});
</script>
<style>
div.lg {display:flex;flex-direction:row;}
.link{opacity: .5;}
.link.active {opacity: 1;}
</style>
<div class="lg">
<button type="button" class="ru link active">ru</button>
<button type="button" class="kz link">kz</button>
<button type="button" class="en link">en</button>
</div>

Нужно чтобы, по нажатию на кнопку соответствующую конкретному классу, переходило на соответствующий псевдосайт. При этом, должно сохраняться состояние нажатия на кнопку, которое оформлено в виде непрозрачности.
Лучший ответ
Elepsis Eclipse Гений (64039) 4 года назад
В ссылке же всё равно присутствует часть с названием кнопки. Тогда можно не заморачиваться с классами и загружать ссылку в зависимости от innerText кликнутой кнопки. И еще одна переменная, которая будет хранить в себе предыдущую кликнутую... чтобы при повторном клике на то же самое, не перегружало.

________________

$(document).ready(function(){

var prev; // Для хранения предыдущей кликнутой
$('.link').on('click', function(){
  $('.link').removeClass('active');
  $(this).addClass('active');

  if( this.innerText != prev ){
    window.location.replace( "mysite.php?lang=" + this.innerText );
    prev = this.innerText;
  }
});

});

_________

Если кусок ссылки не будет совпадать в названием кнопки, использовать data-* атрибуты...

P.s. там, откуда вы взяли кусок кода... чуть ниже был пример с jQuery)
Константин ЕфименкоГуру (3721) 4 года назад
Проблема в том, что когда я перехожу по кнопкам, либо цикл, либо replace() обновляет страницу при каждом клике. В итоге я не вижу, что кнопка сейчас находится в активном состоянии. Она каждый раз возвращается к началу.
Кроме того, data-* атрибут действительно будет к месту, ведь я не собираюсь ничего писать в кнопке. Я хочу использовать её лишь для визуального оформления. А атрибут data-* применить к тегу <img>, который будет внутри и служить переключателем.
Вообщем то, поэтому и задал вопрос...
Константин ЕфименкоГуру (3721) 4 года назад
Я уже 5 час бьюсь и ни как не соображу, как мне возвратить состояние кнопки после replace(), а главное как прикрутить сюда атрибут data-*.

P.S.: Там, откуда я взял кусок кода, тот пример на jQuery, мне не о чём ровным счётом не говорит. Я кроме одного цикла в нём ничего не вижу, хотя и знаю что их там 2. Тоже самое что писать с завязанными глазами и надеяться на чудо.
Elepsis Eclipse Гений (64039) Я просто изначально не уловил, в чем задумка... если страница всё равно в итоге должна перегружатся, то нет смысла всех переключений... можно кнопки заменить на обычные ссылки < a > и через скрипт только добавлять активный класс на текущую (с запретом клика на этот класс)... А если надо подгружать кусок страницы, оставляя кнопки на месте... $('#loader').load('ссылка #id'); Ajax... в блоке id="loader" в текущей странице загрузит блок id="id" из указанной ссылки (можно любые другие селекторы). А по загрузке через php - ничего не знаю.
Остальные ответы
Петр Верхов Мастер (1291) 4 года назад
Прочитал я уже третий Ваш одинаковый вопрос. Я правильно понял, что Вам просто надо чтобы при открытии страницы с определенным параметром один из дивов был другого цвета (прозрачности, размера, формы и тд (нужное подчеркнуть))?
Это же статика, зачем вам js? PHP решает такие вопросы, да и реализация будет проще:
$lang = $_GET['lang'];
Столбца три или много?
if или switch

switch ($lang) {
case ru:
echo "div class="new" /div div /div div /div"; /*скобочки тут не ставятся надеюсь понятно*/
break;
case kz:
echo "div /div div class="new" /div div /div";
break;
case en:
echo "div /div div /div div class="new" /div";
break;
}

как вариант прикрутить цикл генерации дивов и в нем проверять не равен ли текущий параметр GET-у. В таком варианте я бы вообще предложил значения страны из sql таблички подгружать.
Константин ЕфименкоГуру (3721) 4 года назад
"Я правильно понял,... чтобы при открытии страницы... один из дивов был другого цвета?"
Нет, div лишь контейнер с красивым оформлением, состояние находится на кнопке.

В последнем вопросе уже содержится решение моей проблемы:
$(document).ready(function(){
var current_url = window.location.href;
if (current_url.indexOf('?lang=ru') > 0){
$('.tar-ru').addClass('custom');
}
if (current_url.indexOf('?lang=kz') > 0){
$('.tar-kz').addClass('custom');
}
if (current_url.indexOf('?lang=qz') > 0){
$('.tar-qz').addClass('custom');
}
if (current_url.indexOf('?lang=en') > 0){
$('.tar-en').addClass('custom');
}
});
Похожие вопросы