更改字形和图像onclick

Question

所以我有一个图像，上面有一个glyphicon。 单击时，我想更改图像和字形图标。 单击更多应仅在两个状态之间来回切换。 （imgA + glyphiconA <-单击-> imgB + glyphiconB）

我过去经常在单击时更改图像，但是当我尝试使用它更改glyphicon时，它开始出现问题。

当前，我可以单击glyphicon，它将切换到第二个图像，但是glyphicon不会更改，并且再次单击它不会切换回原始图像。

注意：它目前是一个图像轮播，以后会添加更多，因此我需要在修复后保留此功能

 var image_tracker1 = 'main'; function click1() { var image = document.getElementById('ImageButton1'); if(image_tracker1=='main'){ image.src = 'img/index-splash/1blur.jpg'; $(a).find(".glyphicon") .removeClass("glyphicon-triangle-bottom") .addClass("glyphicon-triangle-top"); image_tracker1 = 'blur'; }else{ image.src = 'img/index-splash/1main.jpg' $(a).find(".glyphicon") .removeClass("glyphicon-triangle-top") .addClass("glyphicon-triangle-bottom"); image_tracker1 = 'main'; } } 

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 

 <div id="mySplash1Mobile" class="carousel-splash slide" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <div class="item active"> <img class="first-slide" src="//placehold.it/900x300/c69/f9c/?text=First%20slide" id="ImageButton1" width="100%"> </div> </div> <a class="glyphicon-read-more" href="#mySplash1Mobile"> <span class="glyphicon glyphicon-triangle-bottom" id="ImageButton1" onClick="click1();" aria-hidden="true" ></span> <span class="sr-only">More</span> </a> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 

Answer 1

您可以从范围中删除onclick并将其放置在链接标记本身中。 喜欢改变

<a class="glyphicon-read-more" href="#mySplash1Mobile">到<a class="glyphicon-read-more" href="javascript:click1();">

然后在您的js中进行更改

$(a).find(".glyphicon")到$('a').find(".glyphicon")

Answer 2

我最终通过切换而不是删除类来解决它。

Javascript：

var image_tracker1 = 'main';

function click1() {
  var image = document.getElementById('ImageButton1');
  if(image_tracker1=='main'){
    image.src = 'img/index-splash/1blur.jpg';
    $('#GlyphiconButton1').toggleClass("glyphicon-triangle-top");
    image_tracker1 = 'blur';
  }else{
    image.src = 'img/index-splash/1main.jpg';
    $('#GlyphiconButton1').toggleClass("glyphicon-triangle-top");
    image_tracker1 = 'main';
  }
}

HTML：

<div id="mySplash1Mobile" class="carousel-splash slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img class="first-slide" src="img/index-splash/1main.jpg" id="ImageButton1" width="100%">
    </div>
  </div>
  a class="glyphicon glyphicon-triangle-bottom glyphicon-read-more" href="javascript:click1();" id="GlyphiconButton1">
    <span class="sr-only">More</span>
  </a>
</div>