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.options和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.options和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

工作小提琴：http://jsfiddle.net/FvMYz/4508/

Answer 2

我会建议你使用classes 而不是IDs 作为颜色，因为颜色可以相同。

并将您的一个选择框及其元素与某个类包装到一个 div 中，以便您可以使用该类来显示更改时隐藏的元素。

您也无需为所有选择框编写 javascript 代码。如果您使用类及以下标记结构，这对您来说会很容易。

堆栈片段

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <select class="craft" id="colorselector">
    <option value="red">Red</option>
    <option value="yellow">Yellow</option>
    <option value="blue">Blue</option>
  </select>
  <div class="red colors" style="display:none"> red... </div>
  <div class="yellow colors" style="display:none"> yellow.. </div>
  <div class="blue colors" style="display:none"> blue.. </div>
</div>
<div class="wrap">
  <select class="craft" id="colorselector">
    <option value="red">Red</option>
    <option value="yellow">Yellow</option>
    <option value="blue">Blue</option>
  </select>
  <div class="red colors" style="display:none"> red... </div>
  <div class="yellow colors" style="display:none"> yellow.. </div>
  <div class="blue colors" style="display:none"> blue.. </div>
</div>

Answer 3

您必须为 div 指定不同的 ID，因为您可能只有一个 ID 实例。如果一个 ID 有多个实例，并且您对该特定 ID 进行查询；那么它将始终返回 ID 的第一个实例。

所以第一个应该是：ID = "red"，第二个应该是 ID = "red2"。

此外，您必须让您的第二个 js 代码搜索所属 ID，如下所示。

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

更新： 您应该在每个 ID 的末尾添加“2”，如下所示：

<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>