Question

我在我的网站上使用此功能。 http://jsfiddle.net/Alkasih/kn2695r7/

它在Mozila中运行良好，但在Opera中，它似乎不起作用。任何人都可以帮助我如何让它在任何浏览器中工作。因为这可能对网站来说很重要。

var currentDiv = 0;
$(document).ready(function(){
  $("#pilihWarna option").click(function(){
    $(".bigandsmall").eq($(this).index()).css( "display", "block" );

    if($(this).index()!=currentDiv){
      $(".bigandsmall").eq(currentDiv).css("display","none");}
    currentDiv=$(this).index();

  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="pilihWarna" name="fgdfd" style="background:none;">
  <option>satu</option>
  <option>dua</option>
  <option>tiga</option>
  <option>empat</option>
</select>    

<div class="something">
  <div class="bigandsmall">
    <p>satu</p><img src="image/Chrysanthemum.jpg" width="50px" /></div>

  <div class="bigandsmall">
    <p>dua</p><img src="image/Desert.jpg"  width="50px"/></div>

  <div class="bigandsmall">
    <p>tiga</p><img src="image/Hydrangeas.jpg"  width="50px"/></div>

  <div class="bigandsmall">
    <p>empat</p><img src="image/Jellyfish.jpg"  width="50px"/></div>
</div>

Answer 1

click元素上的option事件并非所有跨浏览器都可靠（例如，您的代码也无法在Chrome上运行，也可能不适用于Safari）。相反，我会在change上使用click和select，并根据select中的currnetly-selected值处理显示/隐藏内容。

这是一种可能的方式：

将id="satu"等添加到.bigandsmall div，然后：

$(document).ready(function(){
  $("#pilihWarna").change(function() {
    var current = "#" + $(this).val();     // Get the value of the select as an ID selector
    $(".bigandsmall").not(current).hide(); // Hide all .bigandsmall that don't match
    $(current).show();                     // Show the one that does
  });
});

$(document).ready(function(){
  $("#pilihWarna").change(function() {
    var current = "#" + $(this).val();
    $(".bigandsmall").not(current).hide();
    $(current).show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="pilihWarna" name="fgdfd" style="background:none;">
  <option>satu</option>
  <option>dua</option>
  <option>tiga</option>
  <option>empat</option>
</select>    

<div class="something">
  <div id="satu" class="bigandsmall">
    <p>satu</p><img src="image/Chrysanthemum.jpg" width="50px" /></div>

  <div id="dua" class="bigandsmall">
    <p>dua</p><img src="image/Desert.jpg"  width="50px"/></div>

  <div id="tiga" class="bigandsmall">
    <p>tiga</p><img src="image/Hydrangeas.jpg"  width="50px"/></div>

  <div id="empat" class="bigandsmall">
    <p>empat</p><img src="image/Jellyfish.jpg"  width="50px"/></div>
</div>

option元素具有基于其文本的隐式值，因此我将其用作要显示/隐藏的元素上的id。

或者，您没有使用id（有时最好不要），您可以使用data-*属性代替data-key="satu" ，也许）：

$(document).ready(function(){
  $("#pilihWarna").change(function() {
    var current = '[data-key="' + $(this).val() + '"]'; // Get the current value of the select as a `data-key` selector
    $(".bigandsmall").not(current).hide();              // Hide all .bigandsmall that don't match
    $(current).show();                                  // Show the one that does
  });
});

$(document).ready(function(){
  $("#pilihWarna").change(function() {
    var current = '[data-key="' + $(this).val() + '"]';
    $(".bigandsmall").not(current).hide();
    $(current).show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="pilihWarna" name="fgdfd" style="background:none;">
  <option>satu</option>
  <option>dua</option>
  <option>tiga</option>
  <option>empat</option>
</select>    

<div class="something">
  <div data-key="satu" class="bigandsmall">
    <p>satu</p><img src="image/Chrysanthemum.jpg" width="50px" /></div>

  <div data-key="dua" class="bigandsmall">
    <p>dua</p><img src="image/Desert.jpg"  width="50px"/></div>

  <div data-key="tiga" class="bigandsmall">
    <p>tiga</p><img src="image/Hydrangeas.jpg"  width="50px"/></div>

  <div data-key="empat" class="bigandsmall">
    <p>empat</p><img src="image/Jellyfish.jpg"  width="50px"/></div>
</div>

但如果你这样做，你可能会这样做，因为你希望这些不是唯一的，所以你可能需要在某个容器内工作。

Answer 2

我猜你想要像this这样的东西。

$("#pilihWarna").change(function () {
    $(".bigandsmall").hide().eq($("#pilihWarna")[0].selectedIndex).show();
});

使用change，当用户使用键盘导航时非常有用。并使用selectedIndex获取所选选项的索引。

这个JavaScript在Opera中不起作用

2 个答案: