根据输入范围更新显示的文本量

Question

我正在写一个简单的JavaScript库来更新基于HTML5输入范围滑块的元素中显示的文本数量（即单词数量）。

我有两个函数执行算法，但它们不显示在DOM上。

HTML

<p>Text example:</p> 

<section data-range="true"> 
    <input type="range" value="90"> 
    <p>This is some sample text that you can reduce. User Account Control (UAC) is a feature that can help you stay in control of your computer by informing you when a programs makes a change that requires administrator permissions. This can be helpful for several reasons, as it allows the user to view program changes and detect system corruption at a faster time.</p> 
</section> 

JS

/* getInnerText 
* Get inner text of range section 
* @param nested child <p> element(s) of range section x 
* @return array of words in the paragraph 
*/ 
function getInnerText(el) { 
    var p = el; 
    var innerText = p.innerText; 
    return innerText.split(' '); 
} 

/* updateInnerText 
* Update inner text based on range section 
*/ 
function updateInnerText(el) { 
    var rangeValue = el.srcElement.value; 
    var arrayOfWords = getInnerText(el.srcElement.parentNode.children[1]); 

    // update words to range value 
    arrayOfWords.splice(arrayOfWords.length, arrayOfWords.length - rangeValue); 

    // update values on DOM 
    el.srcElement.parentNode.children[1].innerText = arrayOfWords.join(" "); 
} 

这里是一个JSbin。

Answer 1

这里是你的代码基于工作JS Bin

// get all DOM elements with data-range attribute 
var rangeElements = document.querySelectorAll("[data-range]"); 

// for each range element on DOM 
for (var i = 0; i < rangeElements.length; i++) { 

    // get x DOM element with [data-range] attribute 
    var el = rangeElements[i]; 

    // get inputRange element 
    var inputRange = el.children[0]; 

    // attach event listener 
    eventListener(inputRange); 

    // Text 
    if (el.children[1].nodeName == "P") { 
     var origText = el.children[1].innerHTML; 
     el.children[1].setAttribute("data-text", origText); 
     initilzeInputRange(0, origText.length, origText.length, 1); 
    } 

    // List 
    else if (el.children[1].nodeName == "UL") { 

    } 

    // Image 
    else if (el.children[1].nodeName == "IMG") { 

    } 
} 

/* initilzeInputRange 
* Setup the default initial values for input range 
* @param minimum value, maximum value, default value, step 
*/ 
function initilzeInputRange(min, max, value, step) { 
    inputRange.min = min; 
    inputRange.max = max; 
    inputRange.value = value; 
    inputRange.step = step; 
} 

/* getInnerText 
* Get inner text of range section 
* @param nested child <p> element(s) of range section x 
* @return array of words in the paragraph 
*/ 
function getInnerText(el) { 
    var p = el; 
    var innerText = p.innerText; 
    return innerText.split(' '); 
} 

/* updateInnerText 
* Update inner text based on range section 
*/ 
function updateInnerText(el, len) { 
    el.srcElement.nextSibling.nextElementSibling.innerHTML = el.srcElement.nextSibling.nextElementSibling.getAttribute("data-text").substring(0, len); 

    // var rangeValue = el.srcElement.value; 
    // var arrayOfWords = getInnerText(el.srcElement.parentNode.children[1]); 

    // update words to range value 
    //arrayOfWords.splice(arrayOfWords.length, arrayOfWords.length - rangeValue); 

    // update values on DOM 
    //el.srcElement.parentNode.children[1].innerText = arrayOfWords.join(" "); 
} 

/* eventListener */ 
function eventListener(el) { 
    el.addEventListener('change', function(e) { 
     updateInnerText(e, el.value); 
     console.log('change~'); 
    }); 
} 

问题： 1.你是不是在变化 2.绑定事件你没有保存原文

Answer 2

嗨如果我理解你的问题，你想什么，这可能是帮助你。

我觉得你写了太多javascript的代码我完全改变了你的编码，并以我的方式实现。

$(document).ready(function(){ 

    $("#myValue").val($("#myText").text()); 

    $("input[type=range]").change(function(){ 

     updateInnerText(); 

    }); 



});   
    /* updateInnerText 
    * Update inner text based on range section 
    */ 
    function updateInnerText() { 
     var arrayOfWords = $("#myValue").val().split(" "); 

     var rangeValue=$("input[type=range]").val(); 

     var count=parseInt(arrayOfWords.length*rangeValue/100); 

     // update words to range value 
     arrayOfWords.splice(0, count); 

     // update values on DOM 
     $("#myText").text(arrayOfWords.join(" ")); 
    } 

它几乎做到了，你要提供现场演示，这里是什么样子采取：demo

如果您还有任何问题随时问。