Ändern von Glyphicon und Bild onclick

So habe ich ein Bild mit einem Glyphicon darauf liegen. Beim Klicken möchte ich das Bild und das Glyphicon ändern. Mehr Klicks sollten sie nur zwischen den beiden Zuständen hin und her schalten. (IMGA + glyphiconA < --Hier klicken -> IMGB + glyphiconB)Ändern von Glyphicon und Bild onclick

ich verwendet, um das Bild zu haben, auf klicken chaning arbeiten, aber wenn ich bei der Veränderung der glyphicon mit ihm hinzuzufügen versucht, es begann Probleme zu haben.

Momentan kann ich auf das Glyphicon klicken und es wird zum zweiten Bild wechseln, aber das Glyphicon wird sich nicht ändern und beim weiteren Klicken wird es nicht zum ursprünglichen Bild zurückkehren.

HINWEIS: es ist derzeit ein Ein-Bild-Karussell wird später mehr so hinzugefügt wird, muß ich mit dem Update, um diese Funktionalität halten

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>

Quelle

2016-06-20 Kate

Sie wahrscheinlich Probleme haben, weil Sie zwei Elemente mit der gleichen ID haben; 'ImageButton1'. Das wird Ihnen einige unerwartete Ergebnisse bringen. Versuchen Sie stattdessen, eine Klasse zu verwenden. – grimmdude

Sie den Onclick aus der Spanne entfernen und lege es in das Link-Tag selbst. Wie ändern

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

Und in Ihrem js, ändern

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

Quelle

2016-06-20 21:53:33

Also habe ich versucht das zu implementieren und es hat irgendwie funktioniert. Es fing an, die Glypicons in einem anderen Bereich der Seite zu channeln (also las ich $ ('a'). Find (".glyphicon-read-more"), um nur in meiner Gegend zu funktionieren), aber das Glyphon änderte das nie Ich habe geklickt. Das Klicken ändert nun konsistent das Bild zwischen A und B, aber es spielt keine Rolle, welches Glyphon A alles ist, was angezeigt wird. – Kate

Bitte senden Sie Ihren aktualisierten Code. –

ich es schließlich fixiert Makeln anstatt Entfernen Klassen.

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>

Quelle

2016-06-22 13:56:23 Kate

Ändern von Glyphicon und Bild onclick

Antwort

Verwandte Themen