0

我已经在 mozilla 上运行了此代码，但不适用于webkit 浏览器。

这是简单的脚本，点击一个具有指定的值，并显示图像。然后是其他的，获得禁用的属性。

谁能帮我理解为什么它不能在 webkit 中工作。

信息：这是一个 FB 应用程序，在 shortstack 上工作

谢谢

编码：

<script type="text/javascript">
$(document).ready(function() {

$('#image,#image2,#image3,#image4,#image5').hide();

    $('option').click(function(e) {
    switch ($(this).attr('value')) {

      case 'ATENTA': 
        $("#image").show().click(function(){
            $(this).hide();
        });
        e.preventDefault();
        break;

      case 'CREATIVA':
        $("#image2").show().click(function(){
            $(this).hide();
        });    
        e.preventDefault();
        break;  

      case 'COQUETA':
        $("#image4").show().click(function(){
            $(this).hide();
        });        
        e.preventDefault();
        break;

      case 'PEGOTE': 
        $("#image3").show().click(function(){
            $(this).hide();
        });     
        e.preventDefault();
        break;

      case 'COLGADA':
        $("#image5").show().click(function(){
            $(this).hide();
        });    
        e.preventDefault();
        break;  
    }
    });

    $('select').change(function(){
    var value = $(this).val();
    $(this).children('option').each(function (){
      if ($(this).val() === value) {
          $(this).siblings('option').attr('disabled', true);
      }
        });
    });

});
4

1 回答 1

0

我猜什么不起作用是图像的实际负载。我认为这是因为这段代码：

$('option').click(function(e) {

浏览器处理表单元素的方式不同。例如，单击选择中的选项可能会触发 Firefox 的“单击”事件，但不会触发 Chrome。

尝试这样的事情：

$(document).ready(function() {

    $('#image,#image2,#image3,#image4,#image5').hide();


    $('select').change(function() {
        var value = $(this).val();

        $(this).children('option').each(function (){
            if ($(this).val() === value) {
                $(this).siblings('option').attr('disabled', true);
            }
        });

        switchImage(value);
    });

    var switchImage = function(toLoad) {
        switch (toLoad) {

          case 'ATENTA':
            $("#image").show().click(function(){
                $(this).hide();
            });
            break;

          case 'CREATIVA':
            $("#image2").show().click(function(){
                $(this).hide();
            });
            break;

          case 'COQUETA':
            $("#image4").show().click(function(){
                $(this).hide();
            });
            break;

          case 'PEGOTE':
            $("#image3").show().click(function(){
                $(this).hide();
            });
            break;

          case 'COLGADA':
            $("#image5").show().click(function(){
                $(this).hide();
            });
            break;
        }
        });
    };

});

这样做是使用 select 标签本身上的 'change' 事件来调用 switchImage 函数，而不是依赖于 option 标签上的 'click' 事件。

于 2013-10-10T22:34:06.720 回答