Question

所以我使用这个非常典型的js代码来显示选择某个值时的div。

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

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

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

我的完整代码在这里。

1.options and divs

{!! 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 and 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

您必须为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>

Answer 3

我建议您使用classes代替IDs作为颜色，因为颜色可以相同。

将一个选择框及其元素与一个类div包装在一起，以便您可以使用此类隐藏更改后的元素。

您也无需为所有选择框编写javascript代码。如果你使用类和下面的标记结构，那么对你来说很容易。

Stack Snippet

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

Javascript 2类似的代码不能一起使用

3 个答案: