javascript - 如何避免 ClickesitemsType 数组数字出现在 javascript 中的 SelectedclassNamesFirstLevel 数组中
问题描述
我开发了一个代码，其中有两个数组包含唯一图像作为 url，但Type每个数组中编号为 1 到 6
我从数组中选择 3 项，从数组中选择 3item1项item11。这 6 项被推送到mixarray1对应的位置Type以识别它。
我已经url从 mixarray1 给出了 html 中给出的六个框到pad每个hover panel类 img 标记的类中。
在每次点击时，每个都hover panel被翻转，后面的图像显示相应的点击名称hover panel被推送到selectedclassnamesFirstLevel
点击对应的imageurl存储在link查找Typeimageurl的位置，存储在Clickeditemslevel1.
如果两个数字相等，则比较中的元素（即类型标记为 1-6 的数字）之后.....收集的两个类名two clicks（即悬停面板名称）被翻转回来。Clickeditemslevel1selectedclassnamesFirstLevel
我的问题是，
如果两次单击后，如果imageType两个悬停面板不同，则两个悬停面板会翻转....之后，当两次单击包含 imageType 相同时，悬停面板会停留在那里......然后问题就来了当两次单击包含不imageTypes同时，悬停面板不会翻转
当我在那点签入时selectedclassnamesFirstLevel，具有悬停面板名称的数组具有ClickeditemType...
如何避免这个ClickeditemType数字进入selectedclassnamesFirstLevel数组
var array2 = [];
var array21 = [];
var forpurchase = [];
var notes = [];
var itempurchase = [];
var curruspondingnotes = [];
var mixarray1 = [];
var clikeditemslevel1 = [];
var emptyarray = [];
var selectedclassnamesFirstLevel = [];
var clickcounter = 0;
var items1 = [{
label: '38.jpg',
url: "https://i.ibb.co/Rp7MZrj/38.jpg",
type: '1'
},
{
label: '55.jpg',
url: 'https://i.ibb.co/Fs7P75q/55.jpg',
type: '2'
},
{
label: '75.jpg',
url: 'https://i.ibb.co/rwdV3mw/75.jpg',
type: '3'
},
{
label: '100.jpg',
url: 'https://i.ibb.co/NsTJwMg/100.jpg',
type: '4'
},
{
label: '125.jpg',
url: 'https://i.ibb.co/h707xz4/125.jpg',
type: '5'
},
{
label: '150.jpg',
url: 'https://i.ibb.co/zPKQXCY/150.jpg',
type: '6'
}
];
var items11 = [{
label: '38.jpg',
url: 'https://i.ibb.co/xL7Pb80/t38.jpg',
type: '1'
},
{
label: '55.jpg',
url: 'https://i.ibb.co/Gd4sThr/t55.jpg',
type: '2'
},
{
label: '75.jpg',
url: 'https://i.ibb.co/xgFyTqq/t75.jpg',
type: '3'
},
{
label: '100.jpg',
url: 'https://i.ibb.co/3MNsCch/t100.jpg',
type: '4'
},
{
label: '125.jpg',
url: 'https://i.ibb.co/4d2zr54/t125.jpg',
type: '5'
},
{
label: '150.jpg',
url: 'https://i.ibb.co/Sy4CDm0/t150.jpg',
type: '6'
}
];
array2 = items1.slice();
array21 = items11.slice();
function rvalue() {
for (let index = 0; index < 3; index++) {
var itempurchase = array2[index];
var curruspondingnotes = array21[index];
try {
forpurchase.push({
label: itempurchase.url,
type: itempurchase.type
});
notes.push({
label: curruspondingnotes.url,
type: curruspondingnotes.type
});
mixarray1.push({
label: curruspondingnotes.url,
type: curruspondingnotes.type
});
mixarray1.push({
label: itempurchase.url,
type: itempurchase.type
})
} catch (err) {}
}
}
rvalue();
//----------------------------setting images to src--------------------------------
for (i = 0; i < 6; i++) {
new1 = document.getElementById(i + 1);
imagee = mixarray1[i].label;
var path = imagee;
$(new1).attr('src', path);
}
//new1.style.backgroundImage = 'url(images/' + imagee + ')';
//----------------------flip function starts------------------------------------
$(document).ready(function() {
$('.hover').click(function() {
$(this).toggleClass('flip');
var k = $(this).attr('class');
var fileNameIndex = k.lastIndexOf("/") + 1;
var filename = k.substr(fileNameIndex);
var result0 = filename.slice(0, -5);
selectedclassnamesFirstLevel.push(result0);
console.log("result0 is" + result0);
console.log("selectedclassnamesFirstLevel" + selectedclassnamesFirstLevel);
console.log(selectedclassnamesFirstLevel);
var takenpad = $(this).find('.pad');
var imagcheck = $(takenpad).find('img');
var link = imagcheck.first().attr("src");
var fileNameIndexforsearch = link;
var filenameurl = link.substr(fileNameIndexforsearch);
let toSearch = 'filenameurl';
clickcounter = clickcounter + 1;
let resultType = mixarray1.filter(obj => {
return obj.label === filenameurl
})
let clickedtype = resultType[0].type;
clikeditemslevel1.push(clickedtype);
//--------------->Remove hoverpanel coming in clikeditemslevel1[] array ---------------------------
for (i = 0; i < clikeditemslevel1.length; i++) {
if (clikeditemslevel1[i].length > 2) {
clikeditemslevel1.splice(i, 1);
}
}
console.log("!!!!!!!!!CLICKED ITEM TYPE ARRAY BELOW!!!!!!!!!");
console.log(clikeditemslevel1);
//--------------->Checking wether clicked two types are Not Equal--------------------------------------
if (typeof clikeditemslevel1[0] !== "undefined" && typeof clikeditemslevel1[1] !== "undefined" && clikeditemslevel1[0] != clikeditemslevel1[1]) {
flipthisTypehoverpanel();
}
//--------------->Checking wether clicked two types Are Equal------------------------------------------
if (typeof clikeditemslevel1[0] !== "undefined" && typeof clikeditemslevel1[1] !== "undefined" && clikeditemslevel1[0] == clikeditemslevel1[1]) {
selectedclassnamesFirstLevel = emptyarray;
selectedclassnamesSecondLevel = emptyarray;
}
if (clickcounter == 2) {
clikeditemslevel1 = emptyarray;
while (clikeditemslevel1.length > 0) {
clikeditemslevel1.pop();
}
clickcounter = 0;
}
});
});
function flipthisTypehoverpanel() {
firstpanel = selectedclassnamesFirstLevel[0];
secondpanel = selectedclassnamesFirstLevel[1];
m = firstpanel.replace(/\s+/g, '.');
n = secondpanel.replace(/\s+/g, '.');
m = "." + m;
n = "." + n;
setTimeout(function() {
$(m).toggleClass('flip');
$(n).toggleClass('flip');
}, 800);
var emptyarray = [];
selectedclassnamesFirstLevel = emptyarray;
selectedclassnamesSecondLevel = emptyarray;
console.log(selectedclassnamesFirstLevel);
}html,
body {
background-color: #78D6CC !important;
}
.panel1 {
position: fixed;
width: 15vw;
height: 15vh;
left: 20vw;
bottom: 80vh;
z-index: 1;
font-size: .8em;
-webkit-perspective: 600px;
-moz-perspective: 600px;
border: 2px solid black;
}
/* -- make sure to declare a default for every property that you want animated -- */
/* -- general styles, including Y axis rotation -- */
.panel1 .front {
background-repeat: no-repeat;
background-size: contain;
background-size: 100% 100%;
position: absolute;
top: 0;
z-index: 900;
width: inherit;
height: inherit;
text-align: center;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateX(0deg) rotateY(0deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
/* -- transition is the magic sauce for animation -- */
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.panel1.flip .front {
z-index: 900;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.panel1 .back {
position: absolute;
top: 0;
z-index: 800;
width: inherit;
height: inherit;
-webkit-transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateY(-180deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
/* -- transition is the magic sauce for animation -- */
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.panel1.flip .back {
z-index: 1000;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
}
/*-------------------------------second box--------------------*/
.panel2 {
position: fixed;
width: 15vw;
height: 15vh;
left: 38vw;
bottom: 80vh;
z-index: 1;
font-size: .8em;
-webkit-perspective: 600px;
-moz-perspective: 600px;
border: 2px solid black;
visibility: visible;
}
/* -- make sure to declare a default for every property that you want animated -- */
/* -- general styles, including Y axis rotation -- */
.panel2 .front2 {
background-repeat: no-repeat;
background-size: contain;
background-size: 100% 100%;
position: absolute;
top: 0;
z-index: 900;
width: inherit;
height: inherit;
text-align: center;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateX(0deg) rotateY(0deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
/* -- transition is the magic sauce for animation -- */
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.panel2.flip .front2 {
z-index: 900;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.panel2 .back2 {
position: absolute;
top: 0;
z-index: 800;
width: inherit;
height: inherit;
-webkit-transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateY(-180deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
/* -- transition is the magic sauce for animation -- */
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.panel2.flip .back2 {
z-index: 1000;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
}
/*-------------------------------third box--------------------*/
.panel3 {
position: fixed;
width: 15vw;
height: 15vh;
left: 55vw;
bottom: 80vh;
z-index: 1;
font-size: .8em;
-webkit-perspective: 600px;
-moz-perspective: 600px;
border: 2px solid black;
visibility: visible;
}
/* -- make sure to declare a default for every property that you want animated -- */
/* -- general styles, including Y axis rotation -- */
.panel3 .front3 {
background-repeat: no-repeat;
background-size: contain;
background-size: 100% 100%;
position: absolute;
top: 0;
z-index: 900;
width: inherit;
height: inherit;
text-align: center;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateX(0deg) rotateY(0deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
/* -- transition is the magic sauce for animation -- */
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.panel3.flip .front3 {
z-index: 900;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.panel3 .back3 {
position: absolute;
top: 0;
z-index: 800;
width: inherit;
height: inherit;
-webkit-transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateY(-180deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
/* -- transition is the magic sauce for animation -- */
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.panel3.flip .back3 {
z-index: 1000;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
}
/*-------------------------------fourth box--------------------*/
.panel4 {
position: fixed;
width: 15vw;
height: 15vh;
left: 20vw;
bottom: 57vh;
z-index: 1;
font-size: .8em;
-webkit-perspective: 600px;
-moz-perspective: 600px;
border: 2px solid black;
}
/* -- make sure to declare a default for every property that you want animated -- */
/* -- general styles, including Y axis rotation -- */
.panel4 .front4 {
background-repeat: no-repeat;
background-size: contain;
background-size: 100% 100%;
position: absolute;
top: 0;
z-index: 900;
width: inherit;
height: inherit;
text-align: center;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateX(0deg) rotateY(0deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
/* -- transition is the magic sauce for animation -- */
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.panel4.flip .front4 {
z-index: 900;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.panel4 .back4 {
position: absolute;
top: 0;
z-index: 800;
width: inherit;
height: inherit;
-webkit-transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateY(-180deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
/* -- transition is the magic sauce for animation -- */
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.panel4.flip .back4 {
z-index: 1000;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
}
/*-------------------------------fifth box--------------------*/
.panel5 {
position: fixed;
width: 15vw;
height: 15vh;
left: 38vw;
bottom: 57vh;
z-index: 1;
font-size: .8em;
-webkit-perspective: 600px;
-moz-perspective: 600px;
border: 2px solid black;
}
/* -- make sure to declare a default for every property that you want animated -- */
/* -- general styles, including Y axis rotation -- */
.panel5 .front5 {
background-repeat: no-repeat;
background-size: contain;
background-size: 100% 100%;
position: absolute;
top: 0;
z-index: 900;
width: inherit;
height: inherit;
text-align: center;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateX(0deg) rotateY(0deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
/* -- transition is the magic sauce for animation -- */
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.panel5.flip .front5 {
z-index: 900;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.panel5 .back5 {
position: absolute;
top: 0;
z-index: 800;
width: inherit;
height: inherit;
-webkit-transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateY(-180deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
/* -- transition is the magic sauce for animation -- */
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.panel5.flip .back5 {
z-index: 1000;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
}
.panel6 {
position: fixed;
width: 15vw;
height: 15vh;
left: 55vw;
bottom: 57vh;
z-index: 1;
font-size: .8em;
-webkit-perspective: 600px;
-moz-perspective: 600px;
border: 2px solid black;
}
/* -- make sure to declare a default for every property that you want animated -- */
/* -- general styles, including Y axis rotation -- */
.panel6 .front6 {
background-repeat: no-repeat;
background-size: contain;
background-size: 100% 100%;
position: absolute;
top: 0;
z-index: 900;
width: inherit;
height: inherit;
text-align: center;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateX(0deg) rotateY(0deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
/* -- transition is the magic sauce for animation -- */
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.panel6.flip .front6 {
z-index: 900;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.panel6 .back6 {
position: absolute;
top: 0;
z-index: 800;
width: inherit;
height: inherit;
-webkit-transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateY(-180deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
/* -- transition is the magic sauce for animation -- */
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.panel6.flip .back6 {
z-index: 1000;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hover panel1" style="border:px solid blue;">
<div class="front">
<div class="top" style="border:px solid red; width:100%; height:100%;">
<p></p>
</div>
</div>
<div class="back">
<div class="pad" style="border:px solid red; width:100%; height:100%;">
<img src="" alt="" id="1" style="width:100%; height:100%; border:px solid black; " />
</div>
</div>
</div>
<div class="hover panel2" style="border:px solid blue;">
<div class="front2">
<div class="top" style="border:px solid red; width:100%; height:100%;">
</div>
</div>
<div class="back2">
<div class="pad" style="border:px solid red; width:100%; height:100%;">
<img src="" alt="" id="2" style="width:100%; height:100%;" />
</div>
</div>
</div>
<div class="hover panel3" style="border:px solid blue;">
<div class="front3">
<div class="top" style="border:px solid red; width:100%; height:100%;">
</div>
</div>
<div class="back3">
<div class="pad" style="border:px solid red; width:100%; height:100%;">
<img src="" alt="" id="3" style="width:100%; height:100%;" />
</div>
</div>
</div>
<div class="hover panel4" style="border:px solid blue;">
<div class="front4">
<div class="top" style="border:px solid red; width:100%; height:100%;">
</div>
</div>
<div class="back4">
<div class="pad" style="border:px solid red; width:100%; height:100%;">
<img src="" alt="" id="4" style="width:100%; height:100%;" />
</div>
</div>
</div>
<div class="hover panel5" style="border:px solid blue;">
<div class="front5">
<div class="top" style="border:px solid red; width:100%; height:100%;">
</div>
</div>
<div class="back5">
<div class="pad" style="border:px solid red; width:100%; height:100%;">
<img src="" alt="" id="5" style="width:100%; height:100%; " />
</div>
</div>
</div>
<div class="hover panel6" style="border:px solid blue;">
<div class="front6">
<div class="top" style="border:px solid red; width:100%; height:100%;">
</div>
</div>
<div class="back6">
<div class="pad" style="border:px solid red; width:100%; height:100%;">
<img src="" alt="" id="6" style="width:100%; height:100%;" />
</div>
</div>
</div>解决方案
推荐阅读
- android - 如何在 ViewPager 中将数据从父 Fragment 通信/发送到子 Fragment？
- ruby-on-rails - Vips - 在图像顶部添加文本，在 Ruby 中调整大小后
- c# - 如何使用 .Net framework 4.6 应用程序中托管的登录页面对 .Net Core 3.1 上的 IdentityServer4 应用程序进行身份验证？
- python - 使用 R 和 ggplot，我将如何绘制具有多个时间值的 3 个变量的数据
- keras - pytorch 中是否有 _keras_shape 的等价物？
- html - 如何使用 Google Docs API 从 Google Doc 获取 HTML？
- python - 使用 Kivy 框架，如何不断更新在 5 个来源之间旋转的图像？
- assembly - 如何在汇编中打印非 asci (¥) 字符
- flutter - “StatefulElement”类型不是“Context”类型的子类型 - 小部件库捕获的异常
- julia - IJulia 未连接到 Jupyter Notebook