lauchmelder/Lauchmelder23.github.io
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

improved jquery selector

Browse source
This commit is contained in:
Robert 2021-01-03 15:41:55 +01:00
parent 89ca065fab
commit e3e2ad47c4
1 changed files with 33 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
index.html
View file

@ -5,9 +5,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kanji</title> <title>Kanji</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<style> <style>
object { .part {
position: absolute; transition: stroke 300ms;
} }
.on { .on {
@ -15,6 +16,10 @@
cursor: pointer; cursor: pointer;
} }
.off {
stroke: orange;
}
span { span {
display: inline-block; display: inline-block;
width: 50vh; width: 50vh;
@ -29,6 +34,7 @@
</style> </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head> </head>
<body> <body>
<h1>search for kanji</h1> <h1>search for kanji</h1>
@ -63,6 +69,22 @@
}); });
} }
$.getHighestElements = function(startPoint, selector, child = false) {
var elems = [];
startPoint.children('g').each(function () {
if(typeof $(this).attr(selector) !== typeof undefined) {
elems.push($(this));
} else {
$.merge(elems, $.getHighestElements($(this), selector, true));
}
});
if(child)
return elems;
else
return $(elems).map(function() { return this.toArray(); });
}
const kanji_raw = $.urlParam('kanji'); const kanji_raw = $.urlParam('kanji');
if(kanji_raw != undefined) if(kanji_raw != undefined)
{ {
@ -72,16 +94,20 @@
var hex = kanji.charCodeAt(0).toString(16); var hex = kanji.charCodeAt(0).toString(16);
$.loadSVG(hex).then( response => { $.loadSVG(hex).then( response => {
var allParts = $("svg > g > g g[kvg\\:element]");
var allParts = $.getHighestElements($("svg > g > g"), "kvg:element");
allParts.addClass("off");
allParts.addClass("part");
allParts.on({ allParts.on({
mouseenter: function () { mouseenter: function () {
allParts.removeClass("on"); $(this).switchClass("off", "on");
$(this).addClass("on"); $(this).find('g.part').switchClass("off", "on");
}, },
mouseleave: function () { mouseleave: function () {
$(this).removeClass("on"); $(this).switchClass("on", "off");
$(this).find('g.part').switchClass("on", "off");
}, },
}); });