¿Cómo realizo una actualización de enlace cuando se hace clic en ella?

Tengo el siguiente enlace que permite a los usuarios navegar a través de una lista de URL (almacenada en una matriz). Cuando un usuario hace clic en Siguiente, quiero que se actualicen el enlace href y el anclaje para el próximo sitio web en mi matriz. Por la forma en que lo he intentado hasta ahora, el enlace omite una URL cada vez, y tengo una idea de por qué, tiene que ver con el clic anterior incluso sin completar, pero ¿cuál es la forma correcta de hacerlo?¿Cómo realizo una actualización de enlace cuando se hace clic en ella?

Aquí se muestra un ejemplo para que pueda ver exactamente lo que estoy hablando: http://jsbin.com/atobep

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
<script> 


$(document).ready(function(){ 

    var items = []; 
    $.each(urls, function(i, item) { 
     items.push("<li>"+item['name']+"</li>"); 
    }); 

    $('#list').append(items.join('')); 

    changeNextLink(0); 
    $("#frame").attr('src', urls[0]['url']); 

}); 

var urls = [{"name":"ebay","url":"http://ebay.com"},{"name":"amazon","url":"http://amazon.com"},{"name":"msn","url":"http://msn.com"},{"name":"yahoo","url":"http://yahoo.com"},{"name":"wikipedia","url":"http://wikipedia.org"}]; 

function changeNextLink(x){  

    $('#now').html(urls[x]['name']); //show the name of currently loaded page 
    $('#nextLink').html(urls[x+1]['name']); //name of next website as anchor of next link 
    $('#nextLink').attr('href', urls[x+1]['url']); //url to next website 
    $('#nextLink').attr('onclick','changeNextLink('+(x+1)+')'); //the problem spot. prepare next link for next click. 

} 
</script> 
</head> 
<body> 

    <ol id="list"></ol> 

    now: <span id="now"></span> | next: <a href="" target="frame" id="nextLink"></a><br /> 
    <iframe name="frame" src="" id="frame" style="width:500px; height:600px;"></iframe> 

</body> 
</html>

Fuente

2011-11-29 ofko

Cómo sobre la adición de una nueva var hacer un seguimiento de la siguiente enlace num, y la adición de un controlador de clic para #nextLine :

$(document).ready(function(){ 
    var nextLinkNum = 0; 
    var items = []; 
    $.each(urls, function(i, item) { 
     items.push("<li>"+item['name']+"</li>"); 
    }); 

    $('#list').append(items.join('')); 

    changeNextLink(nextLinkNum); 
    $("#frame").attr('src', urls[0]['url']); 

    $('#nextLink').click(function() { 
     if (nextLinkNum + 1 < urls.length) 
      changeNextLink(++nextLinkNum); 
    }); 

}); 

function changeNextLink(x){  
    $('#now').html(urls[x]['name']); //show the name of currently loaded page 
    $('#nextLink').html(urls[x+1]['name']); //name of next website as anchor of next link 
    $('#nextLink').attr('href', urls[x+1]['url']); //url to next website 
    $('#nextLink').attr('onclick','changeNextLink('+(x+1)+')'); //the problem spot. prepare next link for next click. 
}

Fuente

2011-11-29 03:06:50

error: '$ ('# nextLink')") ' –

@mmmshuddup - (gran nombre de usuario) - arreglado, gracias –

@AdamRackis Me gusta la elegancia de esta solución. Lo más probable es que vaya con esto. Gracias – ofko

he hecho algunos ligeros cambios en sus javascript y parece estar funcionando correctamente ahora ...

http://jsbin.com/atobep/5/edit

Primero comprobará si hay otra URL a continuación en la lista; si no, la siguiente url se configurará en la url actual (puede establecerla de nuevo en la primera si lo desea). Si hay otro en la lista, configúrelo como la siguiente url.

Fuente

2011-11-29 03:13:41

Parte del punto de Preguntas y respuestas aquí en SO es compartir con el público qué cambios ha realizado y por qué en lugar de simplemente pegar en un enlace a código. – jfriend00

¿Cómo realizo una actualización de enlace cuando se hace clic en ella?

Respuesta

Cuestiones relacionadas