jQuery 选择器有问题

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 时，我想显示日期输入。我尝试了很多东西，包括：

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

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

Answer 1

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

Answer 2

我还添加了fiddlelink：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 选择器有问题

jQuery trouble with selectors

jquery-mobile