如何处理页面中多个滑动条的滑动条更改事件:JqueryMobile

How to handle slider change event for multiple sliders in a page: JqueryMobile

本文关键字：JqueryMobile 事件 何处理 处理      更新时间：2023-09-26

在我的应用程序中，我在一个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页面中的所有其他页面的滑块

正如@Raymond Camden在他的回答中提到的，使用.class而不是id，因为id应该是唯一的。

由于您正在使用多页模型，您需要在pagecreate事件上添加change侦听器。但是，您必须指定哪个页面，以避免在同一页面(通常是DOM的第一页)上添加多个侦听器。在pagecreate上，将change侦听器添加到$(event.target)页面内的.slider。

$(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">中，而标签是该div的兄弟。

将选择器从基于ID的(#something)更改为基于类的(.something)。然后修改代码，使用jQuery兄弟类型选择器使sliderlabel更通用。例如，标签看起来总是滑块的下一个项目。next() api (http://api.jquery.com/next/)应该可以做到。

相关文章：