JQuery replace text dynamically [closed]

Question

JQuery replace text dynamically [closed]

Navigation

#1 by (0 votes)

-1

I am trying to create a gallery where the texts change when the user clicks on the pink bar that now shows the text: "Previus Text" / "Post Text", respectively.

Here the code: link

What I do not get in any way is that all the texts that I have in my arrangement appear. Thank you very much for your responses.

javascript array text

asked by mayte labarga 02.09.2017 в 23:30

source

1 answer

How to set the width value? Media Player plays video on black screen with sound

score 0 · Accepted Answer

I have seen two errors in the code:

The click events you have to put to <a> , and
in the function that changed the name you put the name of the array wrong.

I leave you the updated code (also in JSFiddle ):

var textPrev = document.getElementsByClassName("txtPrev");
var textPost = document.getElementsByClassName("txtPost");
var siguiente = document.getElementsByClassName("next");
var antes = document.getElementsByClassName("prev");

var textoPre =new Array(9);
textoPre[0]="Condor Films";
textoPre[1]="Stories AG";
textoPre[2]="Boutiq AG";
textoPre[3]="Leguan Produktions";
textoPre[4]="Condor Films";
textoPre[5]="Stories AG";
textoPre[6]="Boutiq AG";
textoPre[7]="Leguan Produktions";
textoPre[8]="Boutiq AG";

var numFirma=8;
var firma =0;
if(firma === 0){
$(textPost).text(textoPre[firma]);
}
$(document).ready(function(){
'use strict';		

$(siguiente).click(function(){
	if(firma<numFirma){
  $(textPrev).text(textoPre[firma]);
  firma= firma+1
  $(textPost).text(textoPre[firma]);
  $("#firma").text(firma);
	}
else{
	alert("Es ist die Letztes Bild");
  }	
});	

$(antes).click(function(){		
		
	if(firma>0){
		$(textPost).text(textoPre[firma]);
	firma= firma-1
	$(textPrev).text(textoPre[firma]);
$("#firma").text(firma);
}else{
   	alert("Es ist die Erste Bild");
  }		
});				
});

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

nav a {
  position: absolute;
  top: 0;
  display: block;
  outline: none;
  /*text-align: left;*/
  /*z-index: 1000;*/
  /*	-webkit-transform: translateY(-50%);*/
  /*	transform: translateY(-50%);*/
}

nav a.prev {
  left: 0;
  margin-top: 100px;
}

nav a.next {
  right: 0;
  margin-top: 100px;
}

nav a svg {
  display: block;
  margin: 0 auto;
  padding: 0;
}

.nav-fillslide .icon-wrap {
  position: relative;
  z-index: 100;
  display: block;
  padding: 65px 10px;
  /*distancia entre ellos*/
  background: #455C7B;
  /*#b68dbe*/
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}


/*barra blanca*/

.nav-fillslide .icon-wrap::before {
  content: '';
  position: absolute;
  width: 100%;
  background: #7095C7;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.3s 0.3s;
  transition: transform 0.3s 0.3s;
}

.nav-fillslide a.prev .icon-wrap::before {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.nav-fillslide a.next .icon-wrap::before {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.nav-fillslide div {
  position: absolute;
  padding: 20px;
  top: 0;
  width: 40px;
  height: 115px;
  background: #A75265;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}

.nav-fillslide a.prev div {
  left: 0;
  padding: 20px 150px 20px 70px;
  /*text-align: right;*/
  border-radius: 0 6px 6px 0;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.nav-fillslide a.next div {
  right: 0;
  padding: 20px 70px 20px 150px;
  border-radius: 6px 0 0 6px;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.nav-fillslide h3 {
  margin: 10px 0 0 -30px;
  padding: 8px 50px 10px 15px;
  color: #000;
  font-weight: 400;
  font-size: 1.1em;
  line-height: 1.2;
  font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
}

.nav-fillslide a:hover .icon-wrap::before {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.nav-fillslide a:hover div {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

	<nav class="nav-fillslide">
		<a class="prev" href="#">
			<span class="icon-wrap"><svg class="icon" width="24" height="24" viewBox="0 0 64 64"><use xlink:href="#arrow-left-4"></use></svg></span>
				<section class="oculto"> </section>
					<div class="prevImagen">					
						<h3 class="txtPrev"> Previus Text</h3>
					</div>
					
		</a>
									
		<a class="next" href="#">
					<span class="icon-wrap"><svg class="icon" width="24" height="24" viewBox="0 0 64 64"><use xlink:href="#arrow-right-4"></use></svg></span>
					      <div class="carruselImg">
						<h3 class="txtPost">Post-Text</h3>
					</div>
				</a>
	<span id="firma"></span>
	</nav> <!-- Final de la navegacion -->