2017-05-30 42 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