AJAX语言选择器

时间:2015-11-12 14:31:05

标签: javascript jquery html ajax

我试图制作一个包含多种语言选择的Tumblr博客页面,它会从文件中加载标记并替换标记的元素,如下所示:

<p id="line1">Text in English</p>

用户按下&#34; RU&#34;按钮,浏览器使用AJAX加载html文件,替换p id =&#34; line1&#34;使用文件中的一个,浏览器以第二语言显示段落

我真的找不到任何正常的解决方案,因为我不懂JavaScript(是的),但我知道这很简单,我真的很想要AJAX方式,因为我会更容易翻译。 / p>

我目前的代码:

<!DOCTYPE html>

<html>

<head>

<title>test</title>

<meta charset="utf-8">

<meta name="author" content="yvemiro">

<meta name="description" content="yve miro funny jokes satire internet memes est. 2015">

<link rel="stylesheet" href="http://static.tumblr.com/zicio7x/pI5nxaau9/font.css" type="text/css">

<link rel="stylesheet" href="font.css" type="text/css">



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>



<script>

$("#rusbutton").click(function () {

    var language = 'russian';

    $.ajax({

        url: 'https://psv4.vk.me/c610917/u284972650/docs/267ee3075ebc/langs.xml'

        success: function(xml) {

            $(xml).find('translation').each(function(){

                var id = $(this).attr('id');

                var text = $(this).find(language).text();

                $("." + id).html(text);

            });

        }

    });

});

</script>









<style>

body { color: #0a1713; font-family: 'Clear Sans', Verdana, sans-serif; margin: 0; background-color: #fdfffd; }

em { font-style: italic; }

strong { font-weight: bold; }

h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-weight: normal; }



#navbar {

width: 100%;

line-height: 45px;

margin: 0;

color: rgb(139, 141, 150);

font-size: 15px;

}



#navbarul {

list-style-type: none;

padding: 0;

margin: 0;

margin-left: 16px;

display: inline-block;



}



#navbarul li {

display: inline;

margin-right: 13px;

}



#navbarul li a {



text-decoration: none;

color: inherit;

}



#navbar ul a:hover {

color: rgb(120, 121, 130);

}



#cont {



padding: 0;

text-align: center;

min-width: 400px;

max-width: 700px;

margin: 20px auto;

padding: 0;

}



#yvelogo {

height: 19px;

width: 15px;

vertical-align: -4px;

}



a #yvelogo {

border: 0;

}



#lang {

float: right;

list-style-type: none;

padding: 0;

margin: 12px 16px 0 0;

line-height: initial;

}



#lang li {

margin-bottom: 12px;

}



.reblicon {

height: 17px;

width: 16px;

display: inline-block;

vertical-align: middle;

}



#pagination {

list-style-type: none;

margin: 0;

padding: 0;

position: absolute;

color: gray;

}



#pagination li {

display: inline-block;

margin-right: 10px;

}



#status {

font-style: italic;

color: gray;

background-color: #eeeeee;

padding: 4px 8px;

border-radius: 5px;

}



#line {

margin-right: 15px;

}



#mainlinks {

list-style-type: none;

padding: 0;

margin: 0;

}



#mainlinks li {

display: inline;

padding: 0;

margin: 0 20px;

}

</style>

</head>



<body>

<nav>

      <div id="navbar">

      <ul id="navbarul">

      <li><a href="#"><img id="yvelogo" alt="yve miro" src="http://static.tumblr.com/zicio7x/Btdnxoyc0/home.png"></a></li>

    </ul>

    <ul id="lang"><li><strong>EN</strong></li><li><button id="rusbutton">RU</button></li><li>LT</li><li>FR</li></ul>

      </div>

</nav>

      <div id="cont">

      <img src="http://static.tumblr.com/zicio7x/L8Pnxoyp5/vuvuzela.jpg"><br><br>

      <img id="line" height="27px" width="40px" src="http://static.tumblr.com/zicio7x/xo2nxoye9/line.png" /><span id="status">„Fenmisimn is good”</span>

      <br><br>

<h2 id="title1">SHUT YOUR MOUTH YVE'S SPEAKIN'</h2>

<p id="line1">welcome to my funny satirical™ page</p><br>

<ul id="mainlinks">

<li><a href="#">Blog</a></li>

<li><a href="#">Stuff</a></li>

<li><a href="#">Me</a></li>

<li><a href="#">Ask</a></li>

<li><a href="#">Archive</a></li><br><br>

<li><a href="#">Twitter</a></li>

<li><a href="#">YouTube</a></li>

</ul>

      </div>

</body>

</html>

也替换图像

1 个答案:

答案 0 :(得分:0)

这一行正在寻找课程,而不是ID而不是选择开头的<select class="form-control filters-select" style="border-radius:0"> <option value="*" <?php if ($_GET['select']=="All") echo "selected" ?>>All</option> <option value=".a2">a2</option> <option value=".b2">b2</option> <option value=".c2">c2</option> </select>

.

将其更改为

 $("." + id).html(text);