0

在一个页面上，我有多个 Jquery UI 滑块，它们淡出/在图像中不同图层的不透明度中。它用于投资组合，因此我在加载到页面中的不同 .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 名称时，似乎并没有什么不同。

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

4

1 回答 1

0

我做错了什么是我需要将滑块的 javascript 添加到外部页面中。我确实觉得这有点令人困惑，因为 javascript 已经在加载 html 的页面上，但不知何故它无法引用它，还需要写入外部页面。

于 2012-05-21T18:17:08.173 回答