2017-05-30 35 views
0

我的代码给了我一个错误,当我从我的输入删除data-other-placeholder属性:文本像你见下文:如何控制元素不会出错?

"message": "Uncaught TypeError: Cannot read property 'length' of undefined",

我有,如果jQuery插件后声明中,你可以,如果你看一下看到一个控制..


 
(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>

+0

如果您删除的属性,然后试图通过'数据得到它()'返回'null'。试试这个:'if(getPlaceholder && getPlaceholder.length> 0)' – DontVoteMeDown

+1

嗯,你应该首先检查'getPlaceholder'是否未定义,然后如果它的长度是0,则不是相反。编辑:是的,因为DontVoteMeDown表示它会工作。 – nonzaprej

+0

@nonzaprej这就是重点! – DontVoteMeDown

回答

2

两个问题:

  1. getPlaceholder !== undefined不检查值是否为数组。
  2. 你必须检查两个条件是否都满足,如果第一个不是,第二个不被评估。


 
(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>

+0

有时,最好解释发生了什么问题,并将修正写入错误的代码部分,而不是重写整个代码。 – nonzaprej

+0

@nonzaprej我想我明确提到了什么是错的。 – Strernd

+0

等你编辑答案吧?我总是迟到评论......无论是我还是我是盲人。 – nonzaprej