Fatal编程技术网
  • javascript/
  • Javascript 更改后不会刷新图像'；src&x27；属性

Javascript 更改后不会刷新图像'；src&x27；属性

javascript jquery html

Javascript 更改后不会刷新图像'；src&x27；属性,javascript,jquery,html,Javascript,Jquery,Html,我想在从菜单中选择另一项后刷新图像： <html> <head> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.

我想在从菜单中选择另一项后刷新图像：

<html>
  <head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>

    $(function() {
      $( "#selectable" ).selectable({
        stop: function() {
          $( ".ui-selected", this ).each(function() {
            // Works on FF; doesn't work on Chrome and IE
            d = new Date();
            $("#chart_image").prop("src", this.id + "?" + d.getTime());
          });
        }
      });
    });

    $(function() {
      // Selects the first <li> element
      $( "#selectable" ).selectable().children().first().addClass('ui-selected');
    });

    </script>

  </head>
  <body>
    <?php

      header('Cache-Control: no-cache, no-store, must-revalidate');
      header('Pragma: no-cache');
      header('Expires: 0');

      $dirname = "charts/";
      $images = glob($dirname."*.svg");

      echo '<ol id="selectable">';
      foreach($images as $image) {
        echo '<li class="ui-widget-content" id="'.$image.'">'.basename($image, ".svg").'</li>';
      }
      echo '</ol>';

      echo '<figure><embed id="chart_image" type="image/svg+xml" src="'.$images[0].'"></embed></figure>';
    ?>
  </body>
</html>


$（函数（）{
$（“#可选”）。可选({
停止：函数（）{
$（“.ui已选定”，此）.each（函数（）{
//适用于FF；不适用于Chrome和IE
d=新日期（）；
$（“#chart_image”）.prop（“src”，this.id+“？”+d.getTime（））；
});
}
});
});
$（函数（）{
//选择第一个
  • 元素
$（“#可选”）.selectable（）.children（）.first（）.addClass（'ui-selected'）；
});
    • 上述代码在FF上运行良好。然而，在Chrome和IE上，选择不同的菜单项后，什么都不会发生。我尝试了在文件末尾附加当前时间戳的技巧。我还尝试了缓存头-没有结果

    谢谢

    您可以使用
    选择
    选项
    

      selecting: function(event, ui) { 

    last_selected_value = ui.selecting.value;
    last_selected_id = ui.selecting.id;
            $("#chart_image").attr({
            "src": last_selected_value
        });

   }

    
查看
    

    希望这有帮助
    因此，问题似乎出在
    嵌入
    类型
    type=“image/svg+xml”
    Firefox似乎支持
    svg
    和普通图像，如jpg、gif等，而其他浏览器则不支持。因此，使其在所有浏览器上工作的一种方法是将类型更改为
    type=“image/jpeg”
    ，只要图像不是
    svg
    。如果所有图像的类型都是
    svg
    ，则使用
    type=“image/svg+xml”
    。另一种处理方法是跳过type属性或使用
    img
    标记
    
我还：
    

      

    • 删除了可选择的
      的双重初始化
      • 

    • 已删除
      .each（）
      ，因为您已将最后选择的id设置为嵌入源，因此不需要此选项
      • 

    
看看我在哪里使用的
    type=“image/jpeg
    ，它可以在Chrome/FF/Safri等上使用
    


    $（函数（）{
$（“#可选”）。可选({
停止：函数（）{
$（“图表图像”）.attr({
“src”：$（.ui已选定），此[0].id
});
}
})
.children（）.first（）.addClass（'ui-selected'）；
})；
    

    #反馈{字体大小：1.4em；}
#可选。用户界面选择{背景：#FECA40；}
#可选。ui已选择{背景：#F39814；颜色：白色；}
#可选{列表样式类型：无；边距：0；填充：0；宽度：60%；}
#可选li{边距：3px；填充：0.4em；字体大小：1.4em；高度：18px；}
    

    

  • 项目1
    • 

  • 项目2
    • 

  • 项目3
    • 

    您需要更改
    src
    属性，而不是属性
    方法，它应用于设置以下内容：
    selectedIndex
    ，
    标记名
    ，
    节点名
    ，
    节点类型
    ，
    所有者文档
    ，
    默认选中
    ，或
    默认选中
    
因此，解决方案是：
    

    $("#chart_image").attr('src', this.id + "?" + d.getTime());

    

    您会为此提供JSFIDLE吗？已尝试更改为
    $（“#chart_image”）.attr（“src”，this.id+”？“+d.getTime（））；
    ？我认为缓存不是这里的问题，因为缓存是针对同一个url进行的，这里的url正在更改，所以缓存不会出现picture@Justinas：这是行不通的，如果是另一种方式，那么可能会起作用->不相关，但是，为什么需要
    .each（）呢
    当您只设置一个图像的源时？jQuery文档说“应该使用它”而不是“应该只使用它”。您也没有进一步阅读-“在jQuery 1.6之前，这些属性可以使用.attr（）方法检索，但这不在attr的范围内。这些属性没有对应的属性，只是属性。“@Abhitalks那么您的建议是什么？使用
    prop（）
    方法，在神奇发生之前不会反复重新渲染图像？更改图像属性就是《非常感谢》中使用的示例-这是svg图形的问题。切换到解决了问题！