-1
我有動畫的超級佔位符，我想從我的data-other-placeholder屬性得到佔位符文本如何使用jquery拆分數組？
我的相關領域是這裏
$(function() {
var placeTarget = $(".search-hotels"),
dataValue = placeTarget.attr("placeholder"),
getPlaceholder = placeTarget.data("other-placeholder"),
placeholderText = [getPlaceholder],
targetText = [dataValue];
if ((dataValue == "") || (dataValue == undefined)) {
placeTarget.placeholderTypewriter({
text: placeholderText,
delay: 70,
loop: false,
});
} else {
placeTarget.placeholderTypewriter({
text: targetText,
delay: 70,
loop: false,
});
}
});
因爲你本身我有數據等佔位符，我想分裂用|該怎麼做？
我的完整代碼
/*
jQuery placeholderTypewriter plugin
===================================
Author: Bjoern Diekert <https://github.com/bdiekert>
Version: 1.1.0
License: Unlicense <http://unlicense.org>
*/
(function($) {
"use strict";
$.fn.placeholderTypewriter = function(options) {
// Plugin Settings
var settings = $.extend({
delay: 50,
pause: 1000,
text: [],
loop: true
}, options);
// Type given string in placeholder
function typeString($target, index, cursorPosition, callback) {
// Get text
var text = settings.text[index];
// Get placeholder, type next character
var placeholder = $target.attr('placeholder');
$target.attr('placeholder', placeholder + text[cursorPosition]);
// Type next character
if (cursorPosition < text.length - 1) {
setTimeout(function() {
typeString($target, index, cursorPosition + 1, callback);
}, settings.delay);
return true;
}
// Callback if animation is finished
callback();
}
// Delete string in placeholder
function deleteString($target, callback) {
// Get placeholder
var placeholder = $target.attr('placeholder');
var length = placeholder.length;
// Delete last character
$target.attr('placeholder', placeholder.substr(0, length - 1));
// Delete next character
if (length > 1) {
setTimeout(function() {
deleteString($target, callback)
}, settings.delay);
return true;
}
// Callback if animation is finished
callback();
}
// Loop typing animation
function loopTyping($target, index) {
// Clear Placeholder
$target.attr('placeholder', '');
// Type string
typeString($target, index, 0, function() {
// Up index
index = index + 1;
// If loop is false, just run through the array once
if (index === settings.text.length && !settings.loop) {
return false;
}
// Pause before deleting string
setTimeout(function() {
// Delete string
deleteString($target, function() {
// Start loop over
loopTyping($target, index % settings.text.length)
})
}, settings.pause);
})
}
// Run placeholderTypewriter on every given field
return this.each(function() {
loopTyping($(this), 0);
});
};
}(jQuery));
$(function() {
var placeTarget = $(".search-hotels"),
dataValue = placeTarget.attr("placeholder"),
getPlaceholder = placeTarget.data("other-placeholder");
placeholderText = [getPlaceholder],
targetText = [dataValue];
if ((dataValue == "") || (dataValue == undefined)) {
placeTarget.placeholderTypewriter({
text: placeholderText,
delay: 70,
loop: false,
});
} else {
placeTarget.placeholderTypewriter({
text: targetText,
delay: 70,
loop: false,
});
}
});input {
padding: 12px;
border: 3px solid #ccc;
margin: 30px auto;
display: block;
width: 50%;
}<input type="text" class="search-hotels" placeholder="" data-other-placeholder="Test 1| Test 2| Test3" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>這是
var placeholderText = [
"Where would you like to go?",
"Amsterdam?",
"Paris?",
"Berlin?",
"London?",
"New York?",
"San Francisco?"
];
佔位面積，我想從data-other-placeholder此佔位符的文本，我想與|所以佔位符動畫開始再拆一個接一個
有你是一個單一的數據字段包含多個值的原因，而不是有多個數據字段？ – Taplar
'placeTarget.data（「otherPlaceholder」）。split（「|」）'？ – R3tep
我不明白你期望看到一旦字符串分裂 –