Question

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

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

如果未设置工具提示的内容，则会显示＆＃34;描述尚不可用＆＃34;

以下是设置内容的网页示例： 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;
  }

});

Answer 1

执行此操作的最佳方法是首先不为?创建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;
  }

});

如果无法做到这一点，有两种方法可以解决这个问题：

默认隐藏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();
}

默认情况下?可见，但如果找不到数据则销毁它们：

在你的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导致问题/产生震动的可能性较小，但您可以根据自己的需要实现此目标。

在我指定内容时，仅显示Javascript工具提示

1 个答案: