javascript - 如何控制元素不出错？

当我从input：text中删除data-other-placeholder属性时，我的代码给了我一个错误，如下所示：


  “ message”：“未捕获的TypeError：无法读取属性'length'的
  未定义”，


我在jquery插件后有一个带if语句的控件，如您所见。

(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");
  if (getPlaceholder.length > 0 || getPlaceholder !== undefined) {
    var splitData = getPlaceholder.split("|"),
      targetText = [dataValue];
    var placeholderText = splitData;

    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="Hi I am a default placeholder that you've seen" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

最佳答案

两个问题：


getPlaceholder !== undefined不检查该值是否为数组。
您必须检查两个条件是否都满足，如果第一个条件不满足，则第二个条件不评估。

(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");
  if (getPlaceholder instanceof Array && getPlaceholder.length > 0) {
    var splitData = getPlaceholder.split("|"),
      targetText = [dataValue];
    var placeholderText = splitData;

    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="Hi I am a default placeholder that you've seen" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

关于javascript - 如何控制元素不出错？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44270919/