Question

使用Javascript我希望根据页面上存在的HTML元素类的值显示不同的HTML内容。例如：

<body class="de">

显示：

<div id="de">some html</div>

如果body元素有另一个类值，例如class="en"，则应显示

<div id="en">some other html</div>

我已经玩过hasClass函数和if语句。但它对我不起作用。

Answer 1

怎么样？

<body class="en">
<script>
if($('body').hasClass('de')) {
  $('body').html('<div id="de">some html</div>');
}
else if($('body').hasClass('en')) {
  $('body').html('<div id="en">some other html</div>');
}
else if($('body').hasClass('es')) {
  $('body').html('<div id="es">another html</div>');
}
else {
  ...
}
</script>

动态：

var bodyClass = $('body').attr("class");
var bodyValue = $('#' + bodyClass).html();
$('body').html(bodyValue);

但是你应该验证主体是否有一个类，并且文档中存在一个具有相同id的元素。

Answer 2

我正在使用的解决方案：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

</head>
<body class="lang-de some other">

<h1>&Uuml;berschrift 1</h1>
<div id="lang"></div>

<script>
var bodyClass = $('body').attr("class").substr(0,7);
var bodyValue = $('#' + bodyClass).html();
$('body').html(bodyValue);
    if($('body').hasClass('lang-de')) {
        document.getElementById("lang"); { 
            $('#lang').html('<div id="de">some html</div>');}
    }
        else if ($('body').hasClass('lang-en')) {
        document.getElementById("lang"); { 
            $('#lang').html('<div id="en">some other html</div>');}
}
</script>

</body>
</html>

Answer 3

使用jQuery：

$('.de').html('<div id="de">some html</div>');

如果您使用不同的html内容来实现不同的标记，请使用泛型类+特定类（例如：class =＆＃34; dynamic de＆＃34;）并使用＆＃34; dynamic＆＃34;循环所有元素。在if / elseif（或更好的开关/ case）中使用hasClass来分别定位它们。

顺便说一句，AngularJs有＆＃34;指令＆＃34;完全满足这种需要;）

Answer 4

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

</head>
<body class="lang-de some other">

<h1>&Uuml;berschrift 1</h1>
<div id="lang-de"></div>
<div id="lang-en"></div>

<script>
var bodyClass = $('body').attr("class").substr(0,7);
$('div#lang-*').hide();
$('#' + bodyClass).show();
</script>

</body>
</html>

怎么样？

<html>
<head>
<style>
  body.lang-en #en{display:block;}
  body.lang-de #de{display:block;}
</style>
</head>
<body class="lang-en">
  <div id="en" hidden>some text</div>
  <div id="de" hidden>some other text</div>

  <hr>
  <button onclick="toggle()"></button>
</body>

<script>
 function toggle(){
   var lang=['lang-en','lang-de'];
   var i=lang.indexOf(document.body.className);
   document.body.className=(i+1 == lang.length ? 0 :i+1);
 }
</script>
</html>

OR

使用jQuery

$('#en,#de,#jp').hide();
$('#'+$('body').attr('class').replace('lang-','')).show();

使用Javascript基于CSS类动态插入HTML

4 个答案: