Question

所以我的图像上面有一个字形图案。点击后，我想更改图像和glyphicon。更多点击应该只在两种状态之间来回切换。（imgA + glyphiconA＆lt; - click - ＆gt; 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>

更改glyphicon和图像onclick

2 个答案: