Question

在一个页面上，我有多个Jquery UI Sliders，可淡出图像中不同图层的不透明度。这是一个投资组合，所以我在一个不同的.html页面中有相同的div加载到页面中，它用与新拇指相关的内容替换div中的内容。滑块工作正常，然后当我加载新内容时，它们不会显示。

这是页面链接，拇指在顶部，如果您向下滚动到“分层”部分，然后在“简化图层模型演示”下面，如果您单击开始演示，它将动画滑块进入视图。因此，当页面首次加载并向右滚动时，滑块会显示出来。如果你然后向上滚动并选择一个不同的缩略图并向下滚动并做同样的事情并提示演示动画，它们没有出现，我不知道为什么会发生这种情况。

http://www.klossal.com/portfolio/index_current.html

以下是我正在使用的代码：

JS

<script type="text/javascript">
$(document).ready(function() {
    //Step 1: set up the slider with some options. The valid values for opacity are 0 
to 1
    //Step 2: Bind an event so when you slide the slider and stop, the following     
function gets called
    $('#slider4').slider({ 
    min: 0, 
    max: 1, 
    step: 0.01, 
    value: 1,
    orientation: "horizontal",
    slide: function(e,ui){
                 $('#planet').css('opacity', ui.value)

         }                
    });
$('#slider3').slider({ 
    min: 0, 
    max: 1, 
    step: 0.01, 
    value: 1,
    orientation: "horizontal",
    slide: function(e,ui){
                 $('#nebula').css('opacity', ui.value)

         }                
    });
$('#slider2').slider({ 
    min: 0, 
    max: 1, 
    step: 0.01, 
    value: 1,
    orientation: "horizontal",
    slide: function(e,ui){
                 $('#light').css('opacity', ui.value)

         }                
    });
$('#slider1').slider({ 
    min: 0, 
    max: 1, 
    step: 0.01, 
    value: 1,
    orientation: "horizontal",
    slide: function(e,ui){
                 $('#starsimg').css('opacity', ui.value)

         }                
    });

});
</script>

CSS

#slider4 { width: 280px;}

#slider4 .ui-slider-handle { background: #bbbbbb;border:0px;height:24px;width:24px; }

#slider3 { width: 280px; }
#slider3 .ui-slider-handle { background: #bbbbbb;border:0px;height:24px;width:24px; }

#slider2 { width: 280px; }
#slider2 .ui-slider-handle { background: #bbbbbb;border:0px;height:24px;width:24px; }

#slider1 { width: 280px; }
#slider1 .ui-slider-handle { background: #bbbbbb;border:0px;height:24px;width:24px; }


.ui-widget-content { background: #373737;height:18px;border:0px solid #181818;border-    
color:#-webkit-box-shadow: inset 0px 0px 13px 2px #000000;
box-shadow: inset 0px 0px 13px 2px #000000; }

HTML

<DIV id="sliders_all" class="sliders_container" style="float:left;-webkit- 
transform:translate(308px, -5px);">
<img src="/media/divider.png" width="100%" height="20px" border="0"   
style="opacity:0.0;filter:alpha(opacity=0)">

<div id="slider4" data-wjs-element="box"></div>

<img src="/media/divider.png" width="100%" height="20px" border="0"    
style="opacity:0.0;filter:alpha(opacity=0)">

<div id="slider3" data-wjs-element="box"></div>

<img src="/media/divider.png" width="100%" height="20px" border="0" 
style="opacity:0.0;filter:alpha(opacity=0)">

<div id="slider2" data-wjs-element="box"></div>

<img src="/media/divider.png" width="100%" height="20px" border="0"  
style="opacity:0.0;filter:alpha(opacity=0)">

<div id="slider1" data-wjs-element="box"></div>
<img src="/media/divider.png" width="100%" height="20px" border="0"   
style="opacity:0.0;filter:alpha(opacity=0)">
</DIV id="sliders_container">

单击新缩略图时，HTML部分的代码保持不变，我想因为之前的代码被替换，所以不必担心名称相互冲突。当我回去改变它周围的一些ID名称似乎没有什么区别。

非常感谢我能得到的任何帮助，谢谢。

Answer 1

我做错了是我需要将滑块的javascript添加到外部页面。我发现这有点令人困惑，因为javascript已经在页面上加载了html，但不知怎的，它无法引用它，也需要写入外部。

使用Jquery通过ajax动态加载内容会破坏jquery ui滑块

1 个答案: