Question

我以为我认识jq选择器，但这让我很伤心。鉴于此html代码段（动态添加到jquery移动表单）：

    <li class="ld ui-li-divider ui-bar-inherit" data-role="list-divider" 
        role="heading">Monday&nbsp;
    <label class="dateInput" style="display: none;">Choose a 
        Date to attend:<input type="text" id="dateInput1" name="dateInput1" 
        class="dateInput" 
        data-role="date" data-inline="false" style="display: none;">
    </label>
    </li>
    <li class="hn ui-li-static ui-body-inherit ui-li-has-thumb">
    <input type="checkbox" class="catChk" id="chkH10" name="chkH" data-week-
        day="Monday" value="">Check1</li>
    <li class="hn ui-li-static ui-body-inherit ui-li-has-thumb">
    <input type="checkbox" class="catChk" id="chkH11" name="chkH" data-week-
        day="Monday" value="">Check2</li>

隐藏了class="dateInput"的元素。当选中Check1或Check2时，我想显示dateInput。我尝试了很多东西，包括：

    $("#dayClassList").on("click", "input.catChk", function () {
        $(this).closest(".ld").find(".dateInput").show();
    }

只使用$(".dateInput").show();有效，但我在页面上还有其他dateInputs应该保持隐藏状态。我只想显示最接近的".ld"中的dateInput。 id是动态创建的，因此我无法使用它们。我必须使用类选择器。

Answer 1

$("#dayClassList").on("click", "input.catChk", function () {
        $(".dateInput:first").show();
    }

Answer 2

我还添加了小提琴链接：https://jsfiddle.net/dipakchavda2912/ce9mu1q2/ 让我知道它是否解决了您的问题？

<li class="ld ui-li-divider ui-bar-inherit" data-role="list-divider" 
        role="heading">Monday&nbsp;
    <label class="dateInput" style="display: none;">Choose a Date to attend:
        <input type="text" id="dateInput1" name="dateInput1" 
        class="dateInput" 
        data-role="date" data-inline="false">
    </label>
    </li>
    <li class="hn ui-li-static ui-body-inherit ui-li-has-thumb">
    <input type="checkbox" class="catChk" id="chkH10" name="chkH" data-week-
        day="Monday" value="">Check1</li>
    <li class="hn ui-li-static ui-body-inherit ui-li-has-thumb">
    <input type="checkbox" class="catChk" id="chkH11" name="chkH" data-week-
        day="Monday" value="">Check2</li>

 $(document).ready(function(){
   $(".catChk").on("change", function (e) {
        if(true === $(this).is(":checked")){
        $.each($(".dateInput, input[id^='dateInput']"), function () {
          $(this).show();
        });
      }else{
        $.each($(".dateInput, input[id^='dateInput']"), function () {
          $(this).hide();
        });
      }
   });
 });

Answer 3

Dipak你的回答让我走上正轨。我接受了你的回答。我最后通过改变li.ln的id来包含dayName来克服它。这使得目标变得容易。选中该复选框后，我会获取数据周 - 日值并找到具有相同值的匹配li.ln。

选择器的jQuery问题

3 个答案: