Question

假设我有以下运行脚本：（http://jsfiddle.net/raidnet/AcuU3/）

JS

$(document).bind("pageinit", function (event, data) {
  $(".group2").hide();
  $('#flip2').on('change', function () {
    var regtype = $("#flip2").val();
    if (regtype == "0") {
        $(".group2").hide();
    } else {
        $(".group2").show();
    }
  });
});

HTML

 <ul data-role="listview" data-inset="true">
 <!-- group A -->
 <li data-role="fieldcontain">
    <label for="flip2">FLIP 2 Label:</label>
    <select name="flip2" id="flip2" data-role="slider" data-mini="true">
        <option value="0">NO</option>
        <option value="1">SI</option>
    </select>
</li>
<li data-role="fieldcontain" class="group2">
    <label for="name2" class="ui-hidden-accessible group2">FLIP 2A</label>
    <input type="text" class="group2" name="name2" placeholder="FLIP 2A" id="name2" data-mini="true" value="" data-clear-btn="true">
</li>
<!-- group B -->
<li data-role="fieldcontain">
    <label for="flip3">FLIP 3 Label:</label>
    <select name="flip3" id="flip3" data-role="slider" data-mini="true">
        <option value="0">NO</option>
        <option value="1">SI</option>
    </select>
</li>
<li data-role="fieldcontain" class="group3">
    <label for="name3" class="ui-hidden-accessible group3">FLIP 3A</label>
    <input type="text" class="group3" name="name3" placeholder="FLIP 3A" id="name3" data-mini="true" value="" data-clear-btn="true">
    </ li>
    <!-- group H -->
    </ ul>

这个脚本适用于1个选择元素，但如果我有更多的一组select + input元素让我们说10，我怎么能增强java脚本？我怎样才能将所选字段中的id传递给脚本？

Answer 1

更新

根据您的评论，通过预先选择的开关并隐藏具有“0”值的开关。

$('select').each(function () {
  if($(this).val() == 0) {
    $(this).closest('li').next().hide();
  }
});

<强> Demo

jQM增强了DOM元素，并以与原始HTML代码不同的方式呈现它们。因此，您需要了解增强后的结构/层次结构。

例如，滑块HTML代码

<li data-role="fieldcontain">
  <label for="flip2">FLIP 2 Label:</label>
  <select name="flip2" id="flip2" data-role="slider" data-mini="true">
    <option value="0">NO</option>
    <option value="1">SI</option>
  </select>
</li>

增强后，它看起来像

<li data-role="fieldcontain" class="ui-field-contain ui-body ui-br ui-li ui-li-static ui-btn-up-c ui-first-child">
  <label for="flip2" id="flip2-label" class="ui-slider">FLIP 2 Label:</label>
  <select name="flip2" id="flip2" data-role="slider" data-mini="true" class="ui-slider-switch">
    <option value="0">NO</option>
    <option value="1">SI</option>
  </select>
  <div role="application" class="ui-slider ui-slider-switch ui-btn-down-c ui-btn-corner-all ui-mini"><span class="ui-slider-label ui-slider-label-a ui-btn-active ui-btn-corner-all" role="img" style="width: 100%;">SI</span><span class="ui-slider-label ui-slider-label-b ui-btn-down-c ui-btn-corner-all" role="img" style="width: 0%;">NO</span>
    <div class="ui-slider-inneroffset"><a href="#" class="ui-slider-handle ui-slider-handle-snapping ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" role="slider" aria-valuemin="0" aria-valuemax="1" aria-valuenow="1" aria-valuetext="SI" title="SI" aria-labelledby="flip2-label" style="left: 100%;"><span class="ui-btn-inner"><span class="ui-btn-text"></span></span></a>
    </div>
  </div>
</li>

要回答您的问题，您可以这样做

$('.ui-input-text').closest('li').hide();
$('select').on('change', function () {
  var regtype = $(this).val();
  if (regtype == "0") {
    $(this).closest('li').next().hide();
  } else {
    $(this).closest('li').next().show();
  }
});

<强> Demo

Answer 2

的javascript：

    $(document).bind("pageinit", function (event, data) {
    $("li[class^=group]").hide();
    $('select').on('change', function () {
        var regtype = $(this).val();
        var index = this.id.match(/\d/g)[0]
        if (regtype == "0") {
            $("li.group" + index).hide();
        } else {
            $("li.group" + index).show();
        }
    });
 });

基本上这样做是为每个<select>添加一个点击事件，然后通过使用组类并附加<li>元素的索引来获取相应的<select>。因此，当您更改flip2代码时，代码将获得一个名为<li>的类group2

Answer 3

尝试这种方式，使用attribute startswith选择器：

$(document).bind("pageinit", function (event, data) {
    $("li[class^='group']").hide();
    $('select[id^="flip"]').on('change', function () {
        $(this).closest('li').next().toggle(); //get the closest li and get to the next element and do a toggle, which toggles the visibility
    });
});

<强> Fiddle

但理想情况下，您可以使用公共类，只需执行

$(document).bind("pageinit", function (event, data) {
    $(".group").hide();
    $('.flip').on('change', function () {
        $(this).closest('li').next().toggle();//get the closest li and get to the next element and do a toggle, which toggles the visibility
    });
});

由于翻盖只有2个可能的值，你需要切换状态，你可以摆脱if条件，只需每次切换。

使用jQuery Mobile的多个条件选择器

3 个答案:

更新