javascript - 如何处理页面中多个 slider 的 slider 更改事件 : JqueryMobile

Question

在我的应用程序中，我在一个 HTML 模板中有多个页面，每个页面都有 5 个 slider ， 当我移动 slider 时，我将根据值(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 的 slider 做如下:

<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>

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

Answer 1

作为@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()因为 slider 包裹在 <div class="ui-slider"> 中label 是该 div 的兄弟。

Demo