Смена языка при помощи select

200
20 февраля 2019, 01:30

Изначально делал по клику на кнопки (все работает нормально), а по select не срабатывает. Как исправить для select?

$(document).ready(function() { 
 
   $('.rus').on('click', function() { 
      var r = $('.localization').each(function() { 
         var el = $(this); 
         var key = (el.attr('caption')); 
         el.text(rus[key]); 
      }); 
   }); 
 
   $('.eng').on('click', function() { 
      var r = $('.localization').each(function() { 
         var el = $(this); 
         var key = (el.attr('caption')); 
         el.text(eng[key]); 
      }); 
   }); 
    
   var rus = { 
      test: 'тест', 
      name: 'имя', 
 
   }; 
   var eng = { 
      test: 'test', 
      name: 'name', 
   }; 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<span class='localization' caption='test'>тест</span> 
<span class='localization' caption='name'>имя</span> 
<br> 
 
<input class='rus' type=button value='rus'> 
<input class='eng' type=button value='eng'><br><br> 
 
<select class="#select_language"> 
    <option>Выберите язык</option> 
    <option class='rus' value="rus">Русский</option> 
    <option class='eng' value="eng">Английский</option> 
</select>

Answer 1

Следить за изменением значения select-a можно с помощью обработчика события change select-a, определяя что выбрано по его .value:

$("select").on("change", function() { 
  var languageData = this.value == "rus" ? rus : eng; 
  $(".localization").text(function() { 
    var caption = $(this).attr("caption"); 
    return languageData[caption]; 
  }); 
}); 
 
var rus = { 
  test: 'тест', 
  name: 'имя', 
 
}; 
var eng = { 
  test: 'test', 
  name: 'name', 
};
<span class='localization' caption='test'>тест</span> 
<span class='localization' caption='name'>имя</span> 
<br> 
<select class="#select_language"> 
    <option>Выберите язык</option> 
    <option class='rus' value="rus">Русский</option> 
    <option class='eng' value="eng">Английский</option> 
</select> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Ещё заменил $(".localization").each на $(".localization").text - так несколько короче

Answer 2

$(document).ready(function() { 
 
   $('.rus').on('click', function() { 
      changeLang($(this).val()); 
   }); 
 
 
   $('.eng').on('click', function() { 
      changeLang($(this).val()); 
   }); 
    
   $('.select_language').on("change", function(e){ 
      changeLang($(this).val()); 
   }); 
    
    
  function changeLang(lang){ 
    $('.localization').each(function() { 
      var el = $(this), 
         key = (el.attr('caption')); 
 
      if(languages[lang]){ 
  	    el.text(languages[lang][key]); 
      } 
    }); 
  } 
    
 
  var languages = { 
    rus : { 
        test: 'тест', 
        name: 'имя', 
 
     }, 
     eng : { 
        test: 'test', 
        name: 'name', 
     } 
  } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<span class='localization' caption='test'>тест</span> 
<span class='localization' caption='name'>имя</span> 
<br> 
 
<input class='rus' type=button value='rus'> 
<input class='eng' type=button value='eng'><br><br> 
 
<select class="select_language"> 
    <option>Выберите язык</option> 
    <option class='rus' value="rus">Русский</option> 
    <option class='eng' value="eng">Английский</option> 
</select>

Изменение я вывел в отдельную функцию, так меньше кода получается)

READ ALSO
Как изменить цвет svg иконки?
HTML

Как изменить цвет svg иконки?

Что-то непонятное происходит с иконкойПолучается, что она состоит из элементов которые либо заливаются, либо обводятся

 259
JQuery - непонятное бездействие
jQuery

JQuery - непонятное бездействие

Недавно долго возился с ajax, задавал тут вопрос, и не без помощи изучал, как он работаетРешил разработать мини-чат, но что-то пошло не так: внешний...

 191
Выполнить функцию при нажатие на кнопку
jQuery

Выполнить функцию при нажатие на кнопку

Есть скрипт который проверяет в блоке наличие других похожих блоков и если добавлять дубликат, он выведет confirm окноХочу использовать своё...

 177
Вывод в текстбокс сообщений в реальном времени в wpf
c#

Вывод в текстбокс сообщений в реальном времени в wpf

Что лучше использовать при данной задачеМне нужно на форме WPF в паттерне MVVM выводить сообщения о работе программы, 00:00:00 Выполнена функция...

 197