jQuery切换国旗

时间:2018-07-26 10:30:11

标签: jquery

我对jQuery toggle()有这个小问题。我非常确定我的代码中缺少某些内容,但我不知道是什么。我的问题是我无法按我希望的方式进行标志更改。基本上的想法是,当我单击标志时,它会更改语言和标志。语言每次都会更改,但标志不会更改。

这是我的代码。

<span class="tog">
 <?php echo "<a href=?lang=1"."><img class='flags' src='images/Flag1.png'></a>";?>      
 <?php echo "<a href=?lang=2"."><img class='flags' style='display:none' src='images/Flag2.png'> </a>";?>
</span>
<script>
 $(".tog").click(function(){
  $('img', this).toggle();
 });
</sript>

当存在href且我在页面上更改语言时,flag1不会关闭,而是在应该更改Flag2时始终保持打开状态。

有没有比切换还是更好的方法呢?

1 个答案:

答案 0 :(得分:1)

 $(".tog a").click(function(event){
  event.preventDefault();
  $('.tog').toggleClass('second');
 });
img {
  width: 50px;
}
.flags.second {
  display: none;
}
.tog.second .flags.second {
  display: block;
}

.tog.second .flags.first {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="tog">
 <a href=?lang=1"."><img class='flags first' src='https://theflagcompany.in/wp-content/uploads/2016/01/indianNationlFlag-600x600.jpg'></a>
 <a href=?lang=2"."><img class='flags second'  src='https://upload.wikimedia.org/wikipedia/en/thumb/0/05/Flag_of_Brazil.svg/1280px-Flag_of_Brazil.svg.png'> </a>
</span>