javascript - 动态创建 id 时无法使用 jquery 显示/隐藏 div

Question

我正在使用 jquery 从数据库中获取数据，并希望将其用作多个 div 的 ID。我能够从数据库中获取数据，然后也能够使用循环来迭代数据。但是当我尝试在循环中使用 .prop() 时，它根本不起作用。当我尝试在控制台上记录值时，它是空的。下面是我的代码。请帮帮我。

$(document).ready(function () {
$.get('/getInfringementTypes', function(data)
{
    var parsed = JSON.parse(data);
    //I am getting the following data back from db
    // ["trademark", "copyright", "patent", "design", "other", "item-infringement"]
    var valueArray = [];
    $(parsed).each(function(index,value)
    {
        valueArray[index] = value;
    });
    var i = 0;

    for(i=0; i < valueArray.length; i++)
    {
        $('#'+ valueArray[i]).click(function() {
            if( $('#'+valueArray[i]).prop('checked',true)) {
                $('#'+valueArray[i]+'List').show('5000');
            }
        });
        console.log('#'+valueArray[i]+'List');
    }
    console.log(valueArray);
});
});

这是我的 HTML 代码:

<div class="row">
    <section>
        <b>Verify Violation *</b>
        <br> @foreach(getInfringementTypes() as $infringements_type)
        <input type="radio" name="groupVerify" value="{{$infringements_type->infringement_type}}" id="{{Str::slug($infringements_type->infringement_type)}}" />
        <label for="{{Str::slug($infringements_type->infringement_type)}}">
            {{$infringements_type->infringement_type}}
        </label>
        @endforeach
    </section>
    <br>
    <section id="subCode">
        <div id="trademarkList">
            <b>Sub Code *</b>
            <br> @foreach(getParentCodeFromDb('Trademark') as $subcode)
            <input type="radio" name="groupTrademark" value="{{$subcode}}" id="{{$subcode}}" />
            <label for="{{$subcode}}">
                {{$subcode}}
            </label>
            @endforeach
        </div>
        <div id="copyrightList">
            <b>Sub Code *</b>
            <br> @foreach(getParentCodeFromDb('Copyright') as $subcode)
            <input type="radio" name="groupCopyright" value="{{$subcode}}" id="{{$subcode}}" />
            <label for="{{$subcode}}">
                {{$subcode}}
            </label>
            @endforeach
        </div>
        <div id="patentList">
            <b>Sub Code *</b>
            <br> @foreach(getParentCodeFromDb('Patent') as $subcode)
            <input type="radio" name="sub_code" value="{{$subcode}}" id="{{$subcode}}" />
            <label for="{{$subcode}}">
                {{$subcode}}
            </label>
            @endforeach
        </div>
        <div id="designList">
            <b>Sub Code *</b>
            <br> @foreach(getParentCodeFromDb('Design') as $subcode)
            <input type="radio" name="sub_code" value="{{$subcode}}" id="{{$subcode}}" />
            <label for="{{$subcode}}">
                {{$subcode}}
            </label>
            @endforeach
        </div>
        <div id="otherList">
            <b>Sub Code *</b>
            <br> @foreach(getParentCodeFromDb('Other') as $subcode)
            <input type="radio" name="sub_code" value="{{$subcode}}" id="{{$subcode}}" />
            <label for="{{$subcode}}">
                {{$subcode}}
            </label>
            @endforeach
        </div>
        <div id="itemList">
            <b>Sub Code *</b>
            <br> @foreach(getParentCodeFromDb('Item infringement') as $subcode)
            <input type="radio" name="sub_code" value="{{$subcode}}" id="{{$subcode}}" />
            <label for="{{$subcode}}">
                {{$subcode}}
            </label>
            @endforeach
        </div>
    </section>
    <br> @if($filter['status'] == 'suspect')
    <section>
        <b>Product *</b>
        <br>
        <input name="groupProduct" type="radio" id="test1" />
        <label for="test1">Handbags-Rocco</label>
        <input name="groupProduct" type="radio" id="test2" />
        <label for="test2">Handbags-Brenda</label>
        <input name="groupProduct" type="radio" id="test3" />
        <label for="test3">Handbags-Dracy</label>
        <input name="groupProduct" type="radio" id="test4" />
        <label for="test4">Handbags-Donna Hobo</label>
        <input name="groupProduct" type="radio" id="test5" />
        <label for="test5">Handbags-Kristen</label>
        <input name="groupProduct" type="radio" id="test6" />
        <label for="test6">Apparel-Apparel</label>
        <input name="groupProduct" type="radio" id="test7" />
        <label for="test7">Footwear-Footwear</label>
        <input name="groupProduct" type="radio" id="test8" />
        <label for="test8">Other-Other</label>
    </section>
    @endif
</div>

Answer 1

尝试以下操作:

$.each(parsed,function(i,v){
  if( $('#'+v).is(':checked')) {
      $('#'+v+'List').show('5000');
      $('div[id$=List]').not($('#'+v+'List')).hide();
  }
});