我想在点击它时显示图像弹出窗口。为此,我使用了这个lightbox-plus-jquery.min.js
请参阅以下链接
view-source:http://urbanior.grapesdigital.com/skin/frontend/rwd/default/js/lightbox-plus-jquery.min.js
但问题是当我使用它时,发生TypeError: jQuery(...).insertAfter(...).slider is not a function
错误并且页面中没有显示jquery滑块。
滑块代码
<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>
jQuery(function() {
var select2 = jQuery( "#minbeds2" );
var slider_set2 = jQuery( ".slider_set2" );
var slider = jQuery( "<div style='' id='slider3'></div>" ).insertAfter(slider_set2 ).slider({
min: 1,
max: 8,
range: "min",
value: select2[ 0 ].selectedIndex + 1,
// value: select2[ 0 ].selectedIndex + <?php echo ($measurement_trouserwaist)?$measurement_trouserwaist:'1';?>,
slide: function( event, ui ) {
jQuery("#minbeds3")[0].selectedIndex = ui.value - 1;
//select[ 0 ].selectedIndex = ui.value - 1;
jQuery('.value6').html(ui.value + 29);
jQuery("#f").css("display", "block");
jQuery("#measure_waist").val(ui.value + 29 + "inch");
}
});
min=30;
max= 37;
var array = [];
for (var i = min; i <= max; i++) {
array.push(i);
}
//Create and append select list
var selectList2 = document.createElement("select");
selectList2.setAttribute("id", "minbeds3");
selectList2.setAttribute("name", "minbeds3");
selectList2.setAttribute("class", "minbeds3");
//document.getElementsByClassName("ui-slider-handle").appendChild(selectList);
jQuery( "#slider3 .ui-slider-handle" ).html(selectList2);
//Create and append the options
for (var i = 0; i < array.length; i++) {
var option2 = document.createElement("option");
option2.setAttribute("value", array[i]);
/* if(array[i]=='<?php echo ($measurement_trouserwaist)?$measurement_trouserwaist:'1';?>'){
option2.setAttribute("selected", 'selected');
} */
option2.text = array[i];
selectList2.appendChild(option2);
document.getElementById("minbeds3").appendChild(option2);
}
jQuery( "#minbeds3" ).change(function() {
slider.slider( "value", this.selectedIndex + 1 );
jQuery('.value6').html(this.selectedIndex + 30);
jQuery("#f").css("display", "block");
jQuery("#measure_waist").val(this.selectedIndex + 30 + "inch");
});
});
</script>
我尝试使用<script>jQuery.noConflict();</script>
来解决此问题
但它仍然没有用。