Скрыть подсказку, если контент не найден - PullRequest
Новая
       34

Скрыть подсказку, если контент не найден

0 голосов
/ 20 сентября 2018

Мне нужно скрыть подсказку, если контент не найден.Пытаюсь сделать так, чтобы это сработало, но, похоже, безрезультатно.Я использую старую версию qtip - jquery.qtip-1.0.0-rc3.js.Я пытался использовать 

if (!html) {
    $(this).remove();
}

, это сработало.Он показывал только изображения всплывающей подсказки с контентом, но при наведении всплывающего окна не было.Ниже мой полный код всплывающей подсказки.Пожалуйста, помогите мне.Что мне здесь не хватает? 

$(document).ready(function () {

    $(".form-field").each(function () {

        var optionLabel = $(this).children('.form-label');
        var optionLabelText = optionLabel.text();


        if ($("img", this).length < 1) {
            $(this).children('.form-label.form-label--alternate.form-label--inlineSmall').append("&nbsp;<div class='help_div' style='float:right;'><img src='/content/help.png'  alt='" + optionLabelText + "'/></div>");
        }

    });


    $('.help_div').each(function () {

        var slug = slugify($("img", this).prop('alt'));
        console.log(slug);
        var html = $("#" + slug).html();
        var titleq = $("img", this).prop('alt').replace(/[^-a-zA-Z0-9,&\s]+/ig, '');
        titleq = "<strong style='font-size: 12px'>" + titleq + "</strong><br/>"
        if (!html) html = "Description not available yet."



        $(this).qtip({
            content: html,
            position: {
                corner: {
                    tooltip: 'topRight',
                    target: 'bottomLeft'
                }
            },
            style: {
                tip: {
                    corner: 'rightTop',
                    color: '#6699CC',
                    size: {
                        x: 15,
                        y: 9
                    }
                },
                background: '#6699CC',
                color: '#FFFFFF',
                border: {
                    color: '#6699CC',
                }
            }
        });

    });

    function slugify(text) {
        text = text.replace(/[^-a-zA-Z0-9,&\s]+/ig, '');
        text = text.replace(/-/gi, "_");
        text = text.replace(/^\s+|\s+$/g, "");
        text = text.replace(/\s/gi, "-");
        text = text.toLowerCase();
        return text;
    }

});

Ответы [ 2 ]

0 голосов
/ 21 сентября 2018

Когда вы добавляете $(this).remove(), вам нужно избегать выполнения qtip.Попробуйте добавить возврат после того, как вы удалили элемент: 

if (!html) {
    $(this).remove();
    return;
}

Вот весь пример: 

$(document).ready(function() {
  $(".form-field").each(function() {
    var optionLabel = $(this).children('.form-label');
    var optionLabelText = optionLabel.text();

    if($("img", this).length < 1) {
      $(this).children('.form-label.form-label--alternate.form-label--inlineSmall').append("&nbsp;<div class='help_div' style='float:right;'><img src='/content/help.png'  alt='"+optionLabelText+"'/></div>");
    }
  });

  $('.help_div').each(function() {
    var slug = slugify($("img", this).prop('alt'));
    var html = $("#" + slug).html();
    var titleq = $("img", this).prop('alt').replace(/[^-a-zA-Z0-9,&\s]+/ig, '');

    titleq = "<strong style='font-size: 12px'>" + titleq + "</strong><br/>"

    if (!html) {
      $(this).remove();
      return;
    }

    $(this).qtip({
      content: html,
      position: {
        corner: {
          tooltip: 'topRight',
          target: 'bottomLeft'
        }
      },
      style: {
        tip: {
          corner: 'rightTop',
          color: '#6699CC',
          size: {
            x: 15,
            y: 9
          }
        },
        background: '#6699CC',
        color: '#FFFFFF',
        border: {
          color: '#6699CC',
        }
      }
    });
  });

  function slugify(text) {
    text = text.replace(/[^-a-zA-Z0-9,&\s]+/ig, '');
    text = text.replace(/-/gi, "_");
    text = text.replace(/^\s+|\s+$/g, "");
    text = text.replace(/\s/gi, "-");
    text = text.toLowerCase();
    return text;
  }
});
0 голосов
/ 21 сентября 2018

Что должно работать, но я замечаю, что когда я запускаю это в консоли для вашего сайта, он возвращает Uncaught TypeError: Cannot read property 'jquery' of null

, так как вы используете более старую версиюПлагин qtip, похоже, что вы сталкиваетесь с этим:

https://github.com/qTip2/qTip2/issues/275

Вызов remove для переменной html по сути передает нулевой контент в функцию .qtip.Я бы рекомендовал попробовать исправление, предложенное в этой проблеме GitHub, или использовать более новую версию плагина qtip.

...