Форум

dima-kruglyak · #11 (**permalink**) 08.03.2017, 01:04

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

рони · #12 (**permalink**) 08.03.2017, 01:11

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

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

dima-kruglyak · #13 (**permalink**) 08.03.2017, 01:58

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

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

рони · #14 (**permalink**) 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 · #15 (**permalink**) 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>

рони · #16 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript