我正在尝试创建代码以显示5个按钮类别以及下面最后一个产品的滑块。关于鼠标悬停在任何类别上的影响，我希望看到woocommerce的相关产品。但这是行不通的：按钮和产品滑块都没有。我在控制台中出现错误“无法读取未定义的属性'setAttribute'”。如何解决该问题？
var carouseltopHtml = [];
jQuery(function($) {
var touchtimea = 0;
var touchtimeb = 0;
var touchtimec = 0;
var touchtimed = 0;
var touchtimee = 0;
$("#top_a_category_0").on("click", function() {
if (touchtimea == 0) {
onmuseoverslider(0);
touchtimea = new Date().getTime();
touchtimeb = 0;
touchtimec = 0;
touchtimed = 0;
touchtimee = 0;
if (window.innerWidth < 1024) {
return false;
}
} else {
// compare first click to this click and see if they occurred within double click threshold
if (((new Date().getTime()) - touchtimea) < 3000) {
window.location = this.href;
touchtimea = 0;
} else {
// not a double click so set as a new first click
touchtimea = new Date().getTime();
return false;
}
}
});
$("#top_a_category_1").on("click", function() {
if (touchtimeb == 0) {
onmuseoverslider(1);
touchtimeb = new Date().getTime();
touchtimea = 0;
touchtimec = 0;
touchtimed = 0;
touchtimee = 0;
if (window.innerWidth < 1024) {
return false;
}
} else {
// compare first click to this click and see if they occurred within double click threshold
if (((new Date().getTime()) - touchtimeb) < 3000) {
window.location = this.href;
touchtimeb = 0;
} else {
// not a double click so set as a new first click
touchtimeb = new Date().getTime();
return false;
}
}
});
$("#top_a_category_2").on("click", function() {
if (touchtimec == 0) {
onmuseoverslider(2);
touchtimea = 0;
touchtimeb = 0;
touchtimed = 0;
touchtimee = 0;
touchtimec = new Date().getTime();
if (window.innerWidth < 1024) {
return false;
}
} else {
// compare first click to this click and see if they occurred within double click threshold
if (((new Date().getTime()) - touchtimec) < 3000) {
window.location = this.href;
touchtimec = 0;
} else {
// not a double click so set as a new first click
touchtimec = new Date().getTime();
return false;
}
}
});
$("#top_a_category_3").on("click", function() {
if (touchtimed == 0) {
onmuseoverslider(3);
touchtimed = new Date().getTime();
touchtimea = 0;
touchtimeb = 0;
touchtimec = 0;
touchtimee = 0;
if (window.innerWidth < 1024) {
return false;
}
} else {
// compare first click to this click and see if they occurred within double click threshold
if (((new Date().getTime()) - touchtimed) < 3000) {
window.location = this.href;
touchtimed = 0;
} else {
// not a double click so set as a new first click
touchtimed = new Date().getTime();
return false;
}
}
});
$("#top_a_category_4").on("click", function() {
if (touchtimee == 0) {
onmuseoverslider(4);
touchtimee = new Date().getTime();
touchtimea = 0;
touchtimeb = 0;
touchtimec = 0;
touchtimed = 0;
if (window.innerWidth < 1024) {
return false;
}
} else {
// compare first click to this click and see if they occurred within double click threshold
if (((new Date().getTime()) - touchtimee) < 800) {
window.location = this.href;
touchtimee = 0;
} else {
// not a double click so set as a new first click
touchtimee = new Date().getTime();
return false;
}
}
});
});
jQuery(document).ready(function($) {
for (var i = 0; i < 5; i++) {
carouseltopHtml[i] = jQuery("#carrou0" + i).html();
if (i > 0) {
jQuery("#carrou0" + i).html('');
}
//jQuery("#carrou_bottom_" + i ).css('display','none');
}
});
for (var j = 0; j < 5; j++) {
if (window.innerWidth < 1024) {
if (j == 2)
document.getElementById('top_nav_category_' + j).setAttribute("style", "width:100%; height: 50px; min-height: 50px; background-image: url(); margin-bottom:0px");
else
document.getElementById('top_nav_category_' + j).setAttribute("style", "width:80%; height: fit-content; min-height: 50px; background-image: url(); margin-bottom:0px");
document.getElementById('top_a_category_' + j).setAttribute("style", "display: contents; margin-top: 0px; text-align: center;");
}
}
function onmuseoverslider(id) {
for (var i = 0; i < 5; i++) {
if (id == i)
jQuery("#carrou0" + i).html(carouseltopHtml[i]);
//jQuery("#carrou_bottom_" + i ).css('display','block');
else
jQuery("#carrou0" + i).html('');
// jQuery("#carrou_bottom_" + i ).css('display','none');
}
loadtopslider(id + 1);
/*for(var i = 1; i < 6; i ++){
if(i == id)
document.getElementById('carrou0'+id).className += ' mostrar';
else
document.getElementById('carrou0'+i).className =document.getElementById('carrou0'+i).className.replace(/(?:^|\s)mostrar(?!\S)/g,'');
}*/
}
function loadtopslider(index) {
//jQuery( '.wcpscwc-product-slider' ).each(function( index ) {
var item = jQuery('.wcpscwc-product-slider')[0];
var slider_id = jQuery(item).attr('id');
var slider_conf = jQuery.parseJSON(jQuery(item).closest('.wcpscwc-product-slider-wrap').find('.wcpscwc-slider-conf').attr('data-conf'));
var slider_cls = slider_conf.slider_cls ? slider_conf.slider_cls : 'products';
jQuery('#' + slider_id + ' .' + slider_cls).not('.slick-initialized').slick({
dots: (slider_conf.dots) == "true" ? true : false,
infinite: true,
arrows: (slider_conf.arrows) == "true" ? true : false,
speed: parseInt(slider_conf.speed),
autoplay: (slider_conf.autoplay) == "true" ? true : false,
autoplaySpeed: parseInt(slider_conf.autoplay_speed),
slidesToShow: parseInt(slider_conf.slide_to_show),
slidesToScroll: parseInt(slider_conf.slide_to_scroll),
rtl: (slider_conf.rtl) == "true" ? true : false,
responsive: [{
breakpoint: 1023,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
infinite: true,
dots: false
}
}, {
breakpoint: 767,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 479,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
dots: false
}
},
{
breakpoint: 319,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
dots: false
}
}
]
});
//});
}.btnstop:hover,
.btnstop:focus {
background-color: #ebebeb;
transform: scale(1.1);
box-shadow: 2px 1px 2px 2px rgba(0, 0, 0, 0.3);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="carouselcattop01">
<ul class="ulbtncatcar">
<li class="btncatcar01 btnstop" id="top_nav_category_0" onmouseover="onmuseoverslider(0)" style="width: 15%; height: 20%;">
<a href="/categorie-produit/les-rouges/" title="Vins Rouges" class="titre" title="Les vins rouges" id="top_a_category_0">
<h3 style="color: #000000; font-size: 2vw; margin-bottom: 0px; font-family: Prata; ">Vins</h3>
<h2 style="color: #025F6D; font-family: Montserrat; font-size: 1.5vw;"> Rouges</h2>
</a>
</li>
<li class="btncatcar02 btnstop" id="top_nav_category_1" onmouseover="onmuseoverslider(1)" style="width: 15%; height: 20%;">
<a href="/categorie-produit/les-roses/" title="Vins Rosés" class="titre" title="Les vins rosés" id="top_a_category_1">
<h3 style="color: #000000; font-size: 2vw; margin-bottom: 0px; font-family: Prata;">Vins</h3>
<h2 style="color: #0092A7; font-family: Montserrat; font-size: 1.5vw; margin-bottom: 0px;"> Rosés</h2>
</a>
</li>
<li class="btncatcar03 btnstop" id="top_nav_category_2" onmouseover="onmuseoverslider(2)" style="width: 15%; height: 20%;">
<a href="/categorie-produit/les-blanc-liquoreux-et-secs/" title="Vins Blancs Secs et Liquoreux" class="titre" title="Les vins blancs" id="top_a_category_2">
<h3 style="color: #000000; font-size: 2vw; margin-bottom: 0px; font-family: Prata; padding-top: 10px;">Vins</h3>
<h2 style="color: #0092A7; font-family: Montserrat; font-size: 1.5vw;"> Blancs</h2>
<h5 style="color: #0092A7; font-family: Montserrat; font-size: 1vw;"> Secs et Liquoreux</h5>
</a>
</li>
<li class="btncatcar04 btnstop" id="top_nav_category_3" onmouseover="onmuseoverslider(3)" style="width: 15%; height: 20%;">
<a href="/categorie-produit/les-bulles/" title="Vins Pétillants" class="titre" title="Les vins pétillants" id="top_a_category_3">
<h3 style="color: #000000; font-size: 2vw; margin-bottom: 0px; font-family: Prata;">Vins</h3>
<h2 style="color: #9BD0D9; font-family: Montserrat; font-size: 1.5vw;"> Pétillants</h2>
</a>
</li>
<li class="btncatcar05 btnstop" id="top_nav_category_4" onmouseover="onmuseoverslider(4)" style="width: 15%; height: 20%;">
<a href="/categorie-produit/idees-cadeaux/" title="Idées Cadeaux" class="titre" title="Les idées cadeaux" id="top_a_category_4">
<h3 style="color: #000000; font-size: 2vw; margin-bottom: 0px; font-family: Prata;">Idées</h3>
<h2 style="color: #B1B3B4; font-family: Montserrat; font-size: 1.5vw;"> Cadeaux</h2>
</a>
</li>
<ul id="carrou00" class="ulcarrousel ocultar mostrar">
<li class="licarrousel">
<div class="dudomaine">Les <strong>vins rouges</strong> du Domaine</div>
[products_slider cats="21" slide_to_show="5" design="design-5" dots="false" slide_to_scroll="2"]
</li>
</ul>
<ul id="carrou01" class="ulcarrousel ocultar mostrar">
<li class="licarrousel">
<div class="dudomaine">Les <strong>vins rosés</strong> du Domaine</div>
[products_slider cats="22" slide_to_show="5" design="design-5" dots="false" slide_to_scroll="2"]
</li>
</ul>
<ul id="carrou02" class="ulcarrousel ocultar mostrar">
<li class="licarrousel">
<div class="dudomaine">Les <strong>vins blancs</strong> du Domaine</div>
[products_slider cats="23" slide_to_show="5" design="design-5" dots="false" slide_to_scroll="2"]
</li>
</ul>
<ul id="carrou03" class="ulcarrousel ocultar mostrar">
<li class="licarrousel">
<div class="dudomaine">Les <strong>vins pétillants</strong> du Domaine</div>
[products_slider cats="24" slide_to_show="5" design="design-5" dots="false" slide_to_scroll="2"]
</li>
</ul>
<ul id="carrou04" class="ulcarrousel ocultar mostrar">
<li class="licarrousel">
<div class="dudomaine">Les <strong>idées cadeaux</strong> du Domaine</div>
[products_slider cats="25" slide_to_show="5" design="design-5" dots="false" slide_to_scroll="2"]
</li>
</ul>
</ul>
</div>