Javascript-форум - Как упростить скрипт

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Как упростить скрипт (https://javascript.ru/forum/misc/67774-kak-uprostit-skript.html)

dima-kruglyak

07.03.2017 12:28

Как упростить скрипт

<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>

Как упростить скрипт, он работает как надо, но можно лучше.

рони	07.03.2017 12:49

dima-kruglyak,
что делает скрипт?

dima-kruglyak

07.03.2017 13:01

https://jsfiddle.net/dmitrypix/h4akpgsv/1/

рони	07.03.2017 13:08

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>

рони	07.03.2017 13:09

dima-kruglyak,

[HTML run]тут ваш код[/HTML]

dima-kruglyak

07.03.2017 22:57

Подскажите в каком направлении искать, если скажем в одном элементе 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>

рони	07.03.2017 23:24

dima-kruglyak,
не осилил, может как то иначе опишите.

Manyasha

08.03.2017 00:00

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

08.03.2017 00:35

Да. Спасибо.

рони	08.03.2017 01:00

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>

dima-kruglyak

08.03.2017 01:04

А можно без циклических операций, просто определить наличие data- атрибута и если он не существует подставить пустое значащие?

рони	08.03.2017 01:11

Цитата:

Сообщение от рони

dima-kruglyak,
не осилил, может как то иначе опишите.

:-?

dima-kruglyak

08.03.2017 01:58

Здесь получается обрабатывается массив, а можно просто определитель наличии содержимого в переменой, и если перемена пустая или не существует записать пустое значение. В php это выгладить примерно так

if($var) {
echo $var = "Значение";
} else {
echo $var = "";
}
если $var существует, то выводим ее значение

рони	08.03.2017 03:38

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(!text || !text.length) return;
        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" >No</li>
  <li class="showEdt" data-evalz="[]">No</li>
  <li class="showEdt" data-evalz="[111,1]">Milk</li>
  <li class="showEdt" data-evalz="[222]">Bread</li>
  <li class="showEdt" data-evalz='[null,"test"]'>test</li>
</ul>
<div class="myAnchor">333</div>
<div class="myAnchor">222</div>
</body>
</html>

dima-kruglyak

08.03.2017 19:36

А можете подсказать, как прикрутить свойство target к классу block, чтобы идентифицировать и запустить нужный элемент

<!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>

<div class="block">
<ul>
  <li class="showEdt" data-evalz="111">Milk</li>
  <li class="showEdt" data-evalz="222">Bread</li>
</ul>
<div class="myAnchor">333</div>
</div>

<div class="block">
<ul>
  <li class="showEdt" data-evalz="333">Milk</li>
  <li class="showEdt" data-evalz="444">Bread</li>
</ul>
<div class="myAnchor">555</div>
</div>

<div class="block">
<ul>
  <li class="showEdt" data-evalz="666">Milk</li>
  <li class="showEdt" data-evalz="888">Bread</li>
</ul>
<div class="myAnchor">999</div>
</div>

</body>
</html>

рони	08.03.2017 19:45

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() {
    $(".block").each(function(indx, el) {
        var myAnchor = $(".myAnchor", el),
            myAnchorText = myAnchor.text();
        $("ul", el).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>

<div class="block">
<ul>
  <li class="showEdt" data-evalz="111">Milk</li>
  <li class="showEdt" data-evalz="222">Bread</li>
</ul>
<div class="myAnchor">333</div>
</div>

<div class="block">
<ul>
  <li class="showEdt" data-evalz="333">Milk</li>
  <li class="showEdt" data-evalz="444">Bread</li>
</ul>
<div class="myAnchor">555</div>
</div>

<div class="block">
<ul>
  <li class="showEdt" data-evalz="666">Milk</li>
  <li class="showEdt" data-evalz="888">Bread</li>
</ul>
<div class="myAnchor">999</div>
</div>

</body>
</html>

Часовой пояс GMT +3, время: 23:44.