Javascript 2 相似的代码不能一起工作

Question

所以我使用这个非常典型的 js 代码在选择特定值时显示一个 div。

http://jsfiddle.net/FvMYz/

 $(function() {
    $('#craft').change(function(){
        $('.colors').hide();
        $('#' + $(this).val()).show();
    });
});

但我想让这个 js 代码适用于选择 2 个选项和 2 个 div，所以我添加了另一个具有不同名称的脚本，如下所示，但它失败了。当其他选择选项选择第一个 div 时，就会显示出来。

$(function() {
    $('#craft2').change(function(){
        $('.colors2').hide();
        $('#' + $(this).val()).show();
    });
});

我的完整代码在这里。

1.选项和div

{!! Form::select('id', $upgradeable_items, null, array('id' => 'craft')) !!}

@foreach($reals as $real)
    <div id="{{$real->id}}" class="colors" style=";width: 250px; display:none">
        +{{$real->type}}  <img style="margin-left: 20px" class="marketpics" src="{{$real->picturePath}}">
    </div>
@endforeach

2.选项和div

{!! Form::select('id', $charms, null, array('id' => 'craft2')) !!}

@foreach($chars as $char)
    <div id="{{$char->item_id}}" class="colors2" style="float: right;width: 250px; display:none">
        <img style="margin-left: 20px" class="marketpics" src="{{$char->picturePath}}">
    </div>
@endforeach

关于如何解决这个重叠问题的任何想法...当我在 2.option 下拉列表中选择选项时，它们出现在 1.div 中并再次重叠。但是当我从 1.option 下拉列表中选择选项时，没有问题。它正确显示在 1.div 中。

Answer 1

如果您使用文档查询，则需要在 HTML 中强制使用唯一 ID，因为 ID 文档查询只会返回 ID 的第一个实例。只需确保为每个选择器和相应的查询添加唯一的内容，如下所示:

$(function() {
    $('#craft2').change(function(){
        $('.colors2').hide();
        $('#' + $(this).val() + '2').show();
    });
});

{!! Form::select('id', $charms, null, array('id' => 'craft2')) !!}

 @foreach($chars as $char)
<div id="{{$char->item_id}}2" class="colors2" style="float: right;width: 250px; display:none"><img style="margin-left: 20px" class="marketpics" src="{{$char->picturePath}}"></div> @endforeach

工作 fiddle :http://jsfiddle.net/FvMYz/4508/