グリフコンとイメージを変更するonclick

Question

私はそれの上にグリフコンがあるイメージを持っています。クリックすると、イメージとグリフコンを変更したいと思います。クリックを増やすだけで、2つの状態の間で前後に切り替える必要があります。 （IMGA + glyphiconA < --click - > imgB + glyphiconB）

私はクリック作業にchaningイメージを持っていましたが、私はそれでglyphiconを変更して追加しようとしたとき、それは問題を持つようになりました。

現在、グリフコンをクリックすると2番目の画像に切り替わりますが、グリフコンは変更されず、さらにクリックすると元の画像に戻りません。

注：それはより多くを後で追加され、現在は1画像カルーセルですので、私はあなたがスパンからのonclickを削除することができます修正

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

でこの機能を維持する必要がありますそれをリンクタグ自体に入れてください。 <a class="glyphicon-read-more" href="javascript:click1();">

にそして、あなたのjsの変化

<a class="glyphicon-read-more" href="#mySplash1Mobile"> と同じように、私は最終的にトグルではなく、クラスを削除することによってそれを修正

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

Answer 2

$('a').find(".glyphicon")に変更。

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>