Soy nuevo en Jquery. Hice un control deslizante de texto/comillas simple que llama a los textos del mismo archivo html, pero lo necesito para obtener los textos de un archivo externo ".txt". Tengo la intención de usar este control deslizante en muchas otras páginas, y no quiero editar cada página cuando quiero editar/eliminar estos textos.
He leído que el método $('#div-name').load("../textfile.txt") funcionaría, pero no puedo hacer que funcione con mi control deslizante aunque lo probé en un servidor. ¿Quizás sabes cómo hacerlo? Aquí está mi código:
HTML:
<div id="updates"> <a href="redirect-link1.html">Text 1</a> <a href="redirect-link2.html">Text 2</a> <a href="redirect-link3.html">Text 3</a> </div>CSS:
#updates { width: 100%; height: 100px; float: left; text-align: center; background: rgb(255,255,255); } #updates a { width: 100%; color: rgb(0,0,0); font-size: 25px; line-height: 100px; text-decoration: none; display: inline-block; }JS:
$(function () { var slider = $("#updates"), items = slider.children('a'), length = items.length, i = 0, change = function () { items.eq(i).fadeOut(300, function () { i += 1; if (i === length) { i = 0; } items.eq(i).fadeIn(300); }); }; items.not(':first').hide(); setInterval(change, 5000); });El método $.get es lo que estás buscando.
EDITAR 1: cambiar el método de edición + eliminar .txt líneas vacías
EDIT 2: prueba de enlaces de volcado
EDIT 3: usando enlaces de un archivo externo
jQuery(function () { const // Items container slider = jQuery("#updates"), // Text file containing links url = "https://raw.githubusercontent.com/decryptingfuture/placeholders/main/links.txt" // Initial iteration let i = 0 // Get text contents jQuery.get(url, function (data) { // Split lines and iterate them data.split('\n').map((block) => { // Skip empty lines if (block !== '') { // Append each line to the container slider.append(block) } }) // Children to be slided const items = slider.children() change = function () { items.eq(i).fadeOut(100, function () { ++i; if (i >= items.length) i = 0 items.eq(i).fadeIn(100) }) } items.not(':first').hide() setInterval(change, 500) }) }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="updates"></div>