Jquery Mobile Sliders:如何在站点范围内存储JQM Slider值，然后在新页面上调用这些值

Question

我需要把我所有的JQM滑块的值加起来。我有5页，每页4个滑块。我通过5个不同的类别对这些值进行分类。我想将最后一个页面上每个给定类(.ex、.ag、.co、.ne和op)中的所有值相加，然后求其平均值。有什么简单的方法可以做到这一点吗？

下面的代码正确地对一个页面的值进行了分类和汇总。所有五个页面都是相同的，但问题不同。我希望能得到任何帮助。谢谢!

HTML：

<div data-role="page" id="page1">
    <div data-role="header">
         <h1>My page</h1> 
    </div>
    <div role="main" class="ui-content">
        <div id="mysliders">
            <label for="Slider17">Is a Trendsetter:</label>
            <input class="op" type="range" name="Slider17" id="Slider17" min="1" max="5" value="3" />
            <label for="Slider18">Handles Stress Well:</label>
            <input class="ne" type="range" name="Slider18" id="Slider18" min="1" max="5" value="3" />
            <label for="Slider19">Prefers an Active Lifestyle:</label>
            <input class="ex" type="range" name="Slider19" id="Slider19" min="1" max="5" value="3" />
            <label for="Slider20">Is Punctual:</label>
            <input class="co" type="range" name="Slider20" id="Slider20" min="1" max="5" value="3" />

        </div>
        <hr />
        <p>Extraversion: <strong id="total"></strong></p>
        <p>Agreeableness: <strong id="total2"></strong></p>
        <p>Conscientiousness: <strong id="total3"></strong></p>
        <p>Neuroticism: <strong id="total4"></strong></p>
        <p>Openess: <strong id="total5"></strong></p>
    </div>
    <div data-role="footer" data-position="fixed">
         <h1>Footer</h1> 
    </div>
</div>

JS：

$(document).on("pagecreate", "#page1", function () {
    $(".ex").on("change", function () {
        addAll();
    });
    addAll();
});
$(document).on("pagecreate", "#page1", function () {
    $(".ag").on("change", function () {
        addAll2();
    });
    addAll2();
});
$(document).on("pagecreate", "#page1", function () {
    $(".co").on("change", function () {
        addAll3();
    });
        addAll3();
});
$(document).on("pagecreate", "#page1", function () {
    $(".ne").on("change", function () {
        addAll4();
    });
    addAll4();
});
$(document).on("pagecreate", "#page1", function () {
    $(".op").on("change", function () {
        addAll5();
    });
    addAll5();
});


function addAll() {
    var sum = 0
    $('.ex').each(function (){        
        sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);        
    });
    $('#total').html(sum);
}
function addAll2() {
    var sum = 0
    $('.ag').each(function (){        
        sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);        
    });
    $('#total2').html(sum);
}
function addAll3() {
    var sum = 0
    $('.co').each(function (){        
        sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);        
    });
    $('#total3').html(sum);
}
function addAll4() {
    var sum = 0
    $('.ne').each(function (){        
        sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);        
    });
    $('#total4').html(sum);
}
function addAll5() {
    var sum = 0
    $('.op').each(function (){        
        sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);        
    });
    $('#total5').html(sum);
}

See Demo Here

Answer 1

有几种方法：

• 将值保存在一个或多个cookies中
• 将值保存在本地存储中
• 将值添加到您的链接(GET)
• 通过服务器上的ajax保存值<

>F29

Answer 2

我已经审查了你的代码，并使它的大小，包括总的逻辑，无论是在滑块的变化和初始阶段：

https://jsfiddle.net/kmuuhfL8/6/

Javascript代码更改：

$(document).on("pagecreate", "#page1", function () {
    printValue();
    $(".slider").on("change", function () {
        printValue();
    });
});

function printValue() {      
    var sumAll = 0;
   $('.slider').each(function( index ) {
     $('#sum' + $(this).attr('id')).html($(this).val());
     sumAll += isNaN($(this).val()) ||$(this).val()=== '' ? 0 : parseFloat($(this).val()); 
    });

    $('#sumAllSlider').html(sumAll);
}

HTML更改：

<div data-role="page" id="page1">

    <div data-role="header">
         <h1>Question Page 1</h1> 
    </div>

    <div role="main" class="ui-content">
        <div id="mysliders">
            <label for="Slider17">Question One:</label>
            <input class="slider" type="range" name="Slider17" id="Slider17" min="1" max="5" value="3" />
            <label for="Slider18">Question Two:</label>
            <input class="slider" type="range" name="Slider18" id="Slider18" min="1" max="5" value="3" />
            <label for="Slider19">Question Three:</label>
            <input class="slider" type="range" name="Slider19" id="Slider19" min="1" max="5" value="3" />
            <label for="Slider20">Question Four:</label>
            <input class="slider" type="range" name="Slider20" id="Slider20" min="1" max="5" value="3" />

             <label for="Slider21">Question Five:</label>
            <input class="slider" type="range" name="Slider21" id="Slider21" min="1" max="5" value="3" />
        </div>
    <div id="totals">
        <hr />
        <p>Extraversion: <strong id="sumSlider17"></strong></p>
        <p>Agreeableness: <strong id="sumSlider18"></strong></p>
        <p>Conscientiousness: <strong id="sumSlider19"></strong></p>
        <p>Neuroticism: <strong id="sumSlider20"></strong></p>
        <p>Openess: <strong id="sumSlider21"></strong></p>
         <p>Total: <strong id="sumAllSlider"></strong></p>

     </div>
  </div>   
    <div data-role="footer" data-position="fixed">
         <h1></h1> 
    </div>
</div>