Question

我有一个小页面，我通过改变身体类别从一种语言转到另一种语言：https://jsfiddle.net/3ddo465n/2/

<div class="en container">
  <p lang="en"> ... </p>
  <p lang="ru"> ... </p>
  <form>
    <input type="text" placeholder="Field name">
  </form>
</div>

.container.en [lang="ru"] {
  display: none;
}
.container.ru [lang="en"] {
  display: none;
}

问题在于我无法想到用这种方法改变表单输入占位符文本的任何方法而不重复输入字段（由于重复ID而不能成为有效的HTML）。有什么想法吗？

Answer 1

试试这个：

$("ul > li > a").click(function() {
   var placeHolder ={
      en: 'Field name',
      ru: 'Франции'
   }
   var lang = $(this).data("lang");
   $(".container").removeClass("en ru").addClass(lang);
   $(".container input").attr('placeholder', placeHolder[lang])
})

There is jsfiddle

Answer 2

这样的事可能有效

＆＃13;

var placeEn = "Field name";
var placeRu = "Sorry i don't know";

$("ul > li > a").click(function() {
	var lang = $(this).data("lang");
  $(".container").removeClass("en ru").addClass(lang);
	if (lang == "ru"){
  	$("input[type=text]").prop("placeholder",placeRu);
  } else{
  	$("input[type=text]").prop("placeholder",placeEn);
  }
})

＆＃13;

.container.en [lang="ru"] {
  display: none;
}
.container.ru [lang="en"] {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#" data-lang="en">En</a></li>
  <li><a href="#" data-lang="ru">Ru</a></li>
</ul>

<div class="en container">

  <p lang="en">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium libero aspernatur nihil eum saepe eligendi nobis eos rerum mollitia ex assumenda, tenetur eveniet facere facilis dicta harum explicabo similique ullam!
  </p>
  <p lang="ru">
    10 июня во Франции стартовал 15-й чемпионат Европы по футболу. Сборная России проиграла две встречи на групповом турнире — Словакии (1:2) и Уэльсу (0:3), а также сыграла вничью с Англией (1:1). В итоге команда Леонида Слуцкого досрочно отправилась домой.
    Турнир завершится 10 июля.
  </p>
  <form>
    <input type="text" placeholder="Field name">
  </form>
</div>

＆＃13;

Answer 3

您可以使用jQuery方法attr或prop来更改占位符文本。 Updated fiddle

以下是一个例子。

＆＃13;

$(function() {
  $("ul > li > a").click(function() {
    var lang = $(this).data("lang");
    $(".container").removeClass("en ru").addClass(lang);

    if (lang == "en")
      $('input[type="text"]').attr('placeholder', 'Field name');
    else
      $('input[type="text"]').attr('placeholder', 'Russian text');
  })

});

＆＃13;

.container.en [lang="ru"] {
  display: none;
}
.container.ru [lang="en"] {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="#" data-lang="en">En</a>
  </li>
  <li><a href="#" data-lang="ru">Ru</a>
  </li>
</ul>

<div class="en container">
  <p lang="en">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium libero aspernatur nihil eum saepe eligendi nobis eos rerum mollitia ex assumenda, tenetur eveniet facere facilis dicta harum explicabo similique ullam!
  </p>
  <p lang="ru">
    10 июня во Франции стартовал 15-й чемпионат Европы по футболу. Сборная России проиграла две встречи на групповом турнире — Словакии (1:2) и Уэльсу (0:3), а также сыграла вничью с Англией (1:1). В итоге команда Леонида Слуцкого досрочно отправилась домой.
    Турнир завершится 10 июля.
  </p>
  <form>
    <input type="text" placeholder="Field name">
  </form>
</div>

＆＃13;

Answer 4

这是我上次使用jQuery创建的示例代码。我相信这可以帮助你：

src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js";

$(document).ready(function() {
    if ( $('html').attr('lang') == 'en') {
        $('#intro').text('Hello World');
    }
    else if ( $('html').attr('lang') == 'cn') {
        $('#intro').text('你好，世界');
    }
});

<div id="intro"></div>

只需为您选择的语言创建一个下拉列表，并根据该选项，只需将lang属性设置为cn，en等。

根据身体类别更改占位符值

4 个答案: