Question

我有动画的超级占位符，我希望从data-other-placeholder属性中获取占位符文字

我的相关区域在这里

$(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获取此占位符文本，然后我想用|拆分，以便逐个启动占位符动画

Answer 1

您只需使用split()命令拆分字符串，如下所示。

这将为您提供一系列字符串。

var bits = placeTarget.data("other-placeholder").split("|")

Answer 2

您可以使用split字符串方法。

所以

placeholderText   = [getPlaceholder],
targetText = [dataValue]

应该成为

placeholderText   = (getPlaceholder || '').split('|'),
targetText = (dataValue || '').split('|')

（ || ''将处理undefined ）

如何用jquery拆分数组？

2 个答案: