1

假设我有以下运行脚本：（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 元素，但如果我有更多的一组 select + input 元素让我们说 10，我该如何增强 java 脚本？如何将所选字段中的 id 传递给脚本？

4

3 回答 3

2

更新：

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

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

演示

DOM 元素由 jQM 增强，并以与原始 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();
  }
});

演示

于 2013-09-27T17:07:54.133 回答
1

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

于 2013-09-27T17:06:58.720 回答
1

尝试这种方式，使用属性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
    });
});

小提琴

但理想情况下，您可以为这些使用一个公共类，然后做

$(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 条件并每次都切换。

于 2013-09-27T17:08:18.370 回答