使Javascript工具提示仅在I've指定了内容

Make Javascript tooltip only display when I've specified the content

本文关键字：ve 工具提示 Javascript      更新时间：2023-09-26

我使用一个小javascript在我们的电子商务（bigcommerce）网站上的产品选项旁边显示一个带有解释性工具提示的问号图标。实际上，无论我是否指定了内容，脚本都会显示每个产品选项的图标。工具提示的内容是通过使用页面上描述部分中的以下内容设置的：

<span id="[name of option]" style="display:none">[content of tooltip]</span>

如果工具提示的内容未设置，则会显示"说明尚未可用"

以下是设置内容的页面示例：http://www.www-savvyboater-com.mybigcommerce.com/carver-pontoon-bimini-top-sunbrella-a9sq4893ub

下面是一个没有内容集的示例：http://www.www-savvyboater-com.mybigcommerce.com/carver-bimini-top-double-duck-d5457ub

我希望问号图标只显示在我为工具提示指定内容的选项中。我对javascript的了解还不够，无法独自解决。

以下是有问题的脚本：

$(document).ready(function() {
  $(".productAttributeValue").each(function() {
    var optionLabel = $(this).siblings('div');
    var optionLabelText = optionLabel.children("label").children("span.name").text();
    if ($("img", this).length < 1) {
      $(this).siblings('div')
        .children("label")
        .children("span.name")
        .append("&nbsp;<div class='help_div' style='display: inline;'><img src='/product_images/uploaded_images/help.gif'  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) html = "Description not available yet."
    $(this).qtip({
      content: titleq + 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;
  }
});

实现这一点的最佳方法是首先不要为?创建HTML。

$(document).ready(function() {
  $(".productAttributeValue").each(function() {
    var optionLabel = $(this).siblings('div');
    var optionLabelText = optionLabel.children("label").children("span.name").text();
    // check that optionLabelText is not an empty string
    if ($("img", this).length < 1 && slugify(optionLabelText).trim().length) {
      $(this).siblings('div')
        .children("label")
        .children("span.name")
        .append("&nbsp;<div class='help_div' style='display: inline;'><img src='/product_images/uploaded_images/help.gif'  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) html = "Description not available yet."
    $(this).qtip({
      content: titleq + 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;
  }
});

如果这不可能，那么有两种方法可以处理：

  1. 默认情况下，在CSS中隐藏?，如果数据存在，则使用javascript显示它们

    .help_div{显示：无；}

在您的javascript中：

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).show();
}
  1. 默认情况下使?可见，但如果找不到数据，则将其销毁：

在您的javascript:中

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();
}

选项1造成问题/不和谐的可能性较小，但具体实现方式取决于您。

相关文章：