我有两种语言的博客。我想在单击FlagA.png或FlagB.png时在语言A和B之间切换。每个帖子至少包含两个标志图像。我怎么能用(bootstrap)Jquery做到这一点? (上下文,我没有DB,为了方便多语言,我想利用切换功能)
<div class="post">
<div class="post-content">
<div class="post-title"><a href="#"><b>title</b</a> </div>
<a href="" class="languageA">
<img src="img/countryA.png" alt=""
style="float: right;" /></a>
<a href="" class="languageB">
<img src="img/countryB.png" alt="" style="float: right;
padding-right: 10px;" /></a>
</br>
<div class="post-description">
<p>
post in language A
</p>
</div>
<div class="post-description">
<p>
post in language B but now it is invisible, when pressed countryB image this becomes visible and post in language A not.
</p>
</div>
<p class="test"> test test test test test test test test test test test test</p>
</div>
<div class="post">
<!-- second post\-->
</div>
<!-- -->
<script type="text/jscript">
$(function() {
$('.languageA').click(function () {
$('.test').collapse({
toggle: true
})
});
});
});
</script>
答案 0 :(得分:1)
您可以通过以下方法执行此操作:
$(this).parent
限制每个帖子的切换,因此您可以使用一种语言阅读一篇文章,而使用其他语言阅读另一篇文章。这是HTML:
<div class="post">
<div class="post-content">
<div class="post-title languageA"><a href="#"><b>Title 1 in Language A</b></a></div>
<div class="post-title languageB"><a href="#"><b>Title 1 in Language B</b></a></div>
<a href="#" class="languageA">
<img src="http://flags.redpixart.com/img/united_states_of_america_preview.gif" alt=""
style="float: right;" /></a>
<a href="#" class="languageB">
<img src="http://flags.redpixart.com/img/spain_preview.gif" alt="" style="float: right;
padding-right: 10px;" /></a>
<br/>
<div class="post-description languageA">
<p>
Post 1 in language A
</p>
</div>
<div class="post-description languageB">
<p>
Post 1 in language B
</p>
</div>
<p class="test"> test test test test test test test test test test test test</p>
</div>
</div>
然后以下JavaScript将切换语言:
$(function() {
// Hide Language B when the web page loads
$('.languageB').hide();
$('.languageA').click(function () {
// find all content with .languageA under the div post-content and hide it
$(this).parent().find('.languageA').fadeToggle('slow',function() {
// find all content with .languageB under the div post-content and show it
$(this).parent().find('.languageB').show();});
});
$('.languageB').click(function () {
// find all content with .languageB under the div post-content and hide it
$(this).parent().find('.languageB').fadeToggle('slow',function() {
// find all content with .languageA under the div post-content and show it
$(this).parent().find('.languageA').show(); });
});
});