У меня есть рабочий jQuery, который Ive нашел, чтобы динамически изменять текст с течением времени, с эффектом затухания. Я хочу, чтобы слова добавлялись автоматически по внешней ссылке: Words Page.
Как я могу это сделать?
Моя цель - сохранить JS файл небольшим/минимальным, так как у меня больше кода другого jQuery.
Цените любое руководство!
Проверьте мой: введите ссылку здесь.
HTML
<span class="textbox">Stylish</span>
CSS
span.textbox{
display: inline;
float: left;
font-size: 20px;
margin-top: 50px;
margin-left: 50px;
color: #131313;
font-weight: bold;
letter-spacing: 1px;
}
JS
$(document).ready(function() {
// List your words here:
var words = [
'Awesome',
'Special',
'Sofisticated',
'Simple',
'Great',
'Better',
'Stronger',
'Stylish',
'Flawless',
'Envied',
'Strong',
'Sucessful',
'Grow',
'Innovate',
'Global',
'Knowledgable',
'Solid'
], i = 0;
setInterval(function(){
$('.textbox').fadeOut(500, function(){
$(this).html(words[i=(i+1)%words.length]).fadeIn(500);
});
}, 5000);
});
Использовать jQuery.ajax()
$.ajax('http://www-958.ibm.com/software/data/cognos/manyeyes/datasets/5-adjectives-to-describe-company-2/versions/1.txt').done(function(response, status) {
// Check for error result (404, 500, etc)
if (status !== 'error')
{
// Split words using ", " as separator to words array.
var words = response.split(", ");
// Your code here to change texts. Nothing changed.
setInterval(function(){
$('.textbox').fadeOut(500, function(){
$(this).html(words[i=(i+1)%words.length]).fadeIn(500);
});
}, 5000);
}
});
Но вы не сможете получить этот URL-адрес из-за ошибки междоменной.
Скопируйте txt в свой домен или выполните перенаправление.
Привет, вам нужно сделать ajax-вызов, а затем разделить данные, возвращаемые в массив, поскольку это не допустимая строка json.
попробуйте следующий код
$(document).ready(function(){
$.ajax({
dataType: "html",
url: "http://www-958.ibm.com/software/data/cognos/manyeyes/datasets/5-adjectives-to-describe-company-2/versions/1.txt",
success: function(data) {
var words = data.split(', ');
var i = 0;
setInterval(function(){
$('.textbox').fadeOut(500, function(){
$(this).html(words[i=(i+1)%words.length]).fadeIn(500);
});
}, 5000);
},
error: function(data) {
console.log('error occured');
}
});
});
если вы можете изменить файл txt как действительный массив json, вы можете использовать тип данных json или jsonp
Вот мой пример. Вы не можете использовать IBM много глаз, потому что они не позволяют междоменному доступу. Тем не менее, вы можете использовать Bacon Ipsum. Я часто использую это для генерации случайного текста для тестовых случаев. Вот псевдокод:
Код (jsFiddle)
$(document).ready(function() {
// List your words here:
var words = [];
var baconApi = 'https://baconipsum.com/api/?callback=?';
var baconSettings = {
'type':'meat-and-filler',
'paras':'1'
};
var baconCallback = function(bacon) {
if (bacon && bacon.length > 0) {
// Make word list
bacon.map(function(meat) {
words = words.concat(meat.split(/ /));
});
}
var i = 0;
// Start Timer
setInterval( function(){
$('.textbox').fadeOut(500, function(){
$(this).html(words[i=(i+1)%words.length]).fadeIn(500);
});
}, 5000);
};
$.getJSON( baconApi, baconSettings, baconCallback);
});
проверьте https://api.jquery.com/jQuery.get/
например
var words = {};
$.get( "http://www-958.ibm.com/software/data/cognos/manyeyes/datasets/5-adjectives-to-describe-company-2/versions/1.txt", function( data ) {
words = data.split(',');
});
data
- это то, что возвращается с сервера ->.split делает массив из строки, где бит внутри ''
является разделителем.
РЕДАКТИРОВАТЬ
Если вы не можете использовать $.get из-за кросс-домена, ответ будет следующим:
создать скрипт на вашем сервере (wordslist.php)
используйте CURL, чтобы получить страницу → добавьте содержимое в переменную $wordsList
а затем выполните
return $wordsList;
Затем сделайте $.get
вместо URL 'wordslist.php'.
XMLHttpRequest cannot load http://www-958.ibm.com/software/data/cognos/manyeyes/datasets/5-adjectives-to-describe-company-2/versions/1.txt. No 'Access-Control-Allow-Origin' header is present on the requested resource.