Как упростить скрипт
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<ul>
<li class="showEdt" data-evalz="111">Milk</li>
<li class="showEdt" data-evalz="222">Bread</li>
</ul>
<div class="myAnchor">333</div>
<script>
var myAnchorText = $('.myAnchor').text();
$("ul").on("click", ".showEdt" ,function(){
$('.myAnchor').html($(this).attr("data-evalz"));
var myAnchorText = $('.myAnchor').text();
myAnchorText = $(this).attr("data-evalz")
$( "li" ).hover(
function() {
$('.myAnchor').html($(this).attr("data-evalz"));
}, function() {
$('.myAnchor').html(myAnchorText);
}
);
});
$( "li" ).hover(
function() {
$('.myAnchor').html($(this).attr("data-evalz"));
}, function() {
$('.myAnchor').html(myAnchorText);
}
);
</script>
Как упростить скрипт, он работает как надо, но можно лучше. |
dima-kruglyak,
что делает скрипт? |
|
dima-kruglyak,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var myAnchorText = $(".myAnchor").text();
$("ul").on("click mouseenter mouseleave", ".showEdt", function(event) {
var text = $(this).data("evalz");
if (event.type == "mouseenter") $(".myAnchor").html(text);
else if (event.type == "click") myAnchorText = text;
else $(".myAnchor").html(myAnchorText)
})
});
</script>
</head>
<body>
<ul>
<li class="showEdt" data-evalz="111">Milk</li>
<li class="showEdt" data-evalz="222">Bread</li>
</ul>
<div class="myAnchor">333</div>
</body>
</html>
|
dima-kruglyak,
[HTML run]тут ваш код[/HTML] |
Подскажите в каком направлении искать, если скажем в одном элементе 2 атрибута data а в другом 1, и при наведение или клике myAnchor-2 становился пустой а не принимал замечание первого.
<ul> <li class="showEdt" data-evalz="111" data-evalz-2="1">Milk</li> <li class="showEdt" data-evalz="222">Bread</li> </ul> <div class="myAnchor">333</div> <div class="myAnchor-2">222</div> |
dima-kruglyak,
не осилил, может как то иначе опишите. |
dima-kruglyak, может так?
Сделала на основе примера от Рони <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var sufs=[],
myAnchorText=[];
$("div[class^='myAnchor']").each(function(){
var suf = $(this).attr("class").replace("myAnchor","");
sufs.push(suf);
myAnchorText.push($(".myAnchor" + suf).text())
});
$("ul").on("click mouseenter mouseleave", ".showEdt", function(event) {
var text = [], el;
el = $(this);
$(sufs).each(function(i, s){
text[i] = el.data("evalz"+s) == undefined ? "" : el.data("evalz"+s);
});
if (event.type == "mouseenter") {
$(sufs).each(function(i, s){
$(".myAnchor"+ s).html(text[i]);
});
}else if (event.type == "click") {
$(sufs).each(function(i, s){
myAnchorText[i] = text[i];
});
}else{
$(sufs).each(function(i, s){
$(".myAnchor"+ s).html(myAnchorText[i]);
});
}
})
});
</script>
<ul>
<li class="showEdt" data-evalz="111" data-evalz-2="1">Milk</li>
<li class="showEdt" data-evalz="222">Bread</li>
</ul>
<div class="myAnchor">333</div>
<div class="myAnchor-2">222</div>
|
Да. Спасибо.
|
dima-kruglyak,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
function rev(sel, text) {
return $(sel).map(function(i) {
return text ? $(this).text(text[i] || "") : $(this).text()
}).get()
};
var myAnchorText = rev(".myAnchor");
$("ul").on("click mouseenter mouseleave", ".showEdt", function(event) {
var text = $(this).data("evalz");
if (event.type == "mouseenter") rev(".myAnchor",text);
else if (event.type == "click") myAnchorText = text;
else rev(".myAnchor",myAnchorText);
})
});
</script>
</head>
<body>
<ul>
<li class="showEdt" data-evalz="[111,1]">Milk</li>
<li class="showEdt" data-evalz="[222]">Bread</li>
</ul>
<div class="myAnchor">333</div>
<div class="myAnchor">222</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 14:45. |