Question

在我的应用中，我在一个HTML模板中有多个页面，每个页面都有5个滑块，当我移动滑块时，根据值（1到5），我将显示一个文本。下面是两页的样本

<!-- Start of 2 page--> 
<div data-role="page" id="page2" >
     <!-- Start of content -->
    <div data-role="content" id="target-content">

   <label for="slider">1. .............</label>
    <input type="range" name="slider" id="slider" value="0" min="0" max="5"  />
     <label id="sliderlabel"></label>

     <label for="slider1">2............................ </label>
    <input type="range" name="slider" id="slider" value="0" min="0" max="5"  />
     <label id="sliderlabel"></label>

     <label for="slider2">3. ................</label>
    <input type="range" name="slider" id="slider" value="0" min="0" max="5"  />
     <label id="sliderlabel"></label>

    </div>
    <!-- end of content -->

</div>
<!-- end of 2 page-->

<!-- Start of 3 page--> 
<div data-role="page" id="page3" >
     <!-- Start of content -->
    <div data-role="content" id="target-content"" >

   <label for="slider">1. .............</label>
    <input type="range" name="slider" id="slider" value="0" min="0" max="5"  />
     <label id="sliderlabel"></label>

     <label for="slider1">2............................ </label>
    <input type="range" name="slider" id="slider" value="0" min="0" max="5"  />
     <label id="sliderlabel"></label>

     <label for="slider2">3. ................</label>
    <input type="range" name="slider" id="slider" value="0" min="0" max="5"  />
     <label id="sliderlabel"></label>

    </div>
    <!-- end of content --> 
</div>
<!-- end of 3 page-->

我正在根据ID进行第一个滑块：

<script type="text/javascript"> 
$(document).on('pagecreate', function() {

    $("#slider").change(function () {
        sVal = $(this).val();

        if (sVal == 0) {
            $('#sliderlabel').text('');
        }

        if (sVal == 1) {
            $('#sliderlabel').text('Strongly disagree');
        }

          if (sVal == 2) {
            $('#sliderlabel').text('Disagree');
        }

          if (sVal == 3) {
            $('#sliderlabel').text('Neither agree nor disagree');
        }

          if (sVal == 4) {
            $('#sliderlabel').text('Agree');
        }

          if (sVal == 5) {
            $('#sliderlabel').text('Strongly Agree');
        }   

    });
});
</script>

现在，如何实现更改页面每个滑块的文本以及单个index.html页面中所有其他页面的滑块。

Answer 1

将您的选择器从基于ID的（#something）更改为基于类的（.something）。然后使用jQuery兄弟类型选择器更改代码以使sliderlabel更通用。因此，例如，看起来标签始终是滑块中的下一个项目。下一个（）api（http://api.jquery.com/next/）应该这样做。

Answer 2

在答案中提及@Raymond Camden，使用.class代替id，因为id应该是唯一的。

由于您正在使用多页模型，因此您需要在change事件后添加pagecreate侦听器。但是，您必须指定哪个页面，以便不在同一页面上添加多个侦听器（通常是DOM中的第一页）。在pagecreate上以change页面.slider添加$(event.target)个$(document).on("pagecreate", function (event) { $(event.target).find(".slider").on("change", function () { sVal = $(this).val(); if (sVal == 1) { $(this).closest("div").next('.sliderlabel').text('New text'); } }); });听众。

$(event.target)

.find()是使用change创建的网页，将.slider听众附加到id。

要更改标签的文字，您还需要将.class替换为.closest()。此外，您需要使用.next()和<div class="ui-slider">，因为滑块包含在{{1}}中，标签是该div的兄弟。

<强> Demo

如何处理页面中多个滑块的滑块更改事件：JqueryMobile

2 个答案: