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

如果您仍有任何疑问，请随时提出。

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

2 个答案: