Javascript甜警报和文本内的html链接

我有以下警告代码

<script type="text/javascript" charset="utf-8">
    $('.patient-details').click(function(e) {
        e.preventDefault();
        var name = $(this).attr('data-name');
        var gender = $(this).attr('data-gender');
        var age = $(this).attr('data-age');
        var country = $(this).attr('data-country');
        var state = $(this).attr('data-state');
        var address = $(this).attr('data-address');
        var report = $(this).attr('data-report');
        swal({
            title: name,
            text: "Gender: " + gender +"\n" + "Age: " + age +"\n" + "Country: " + country +"\n" + "State: " + state +"\n" + "Address: " + address +"\n" + "Report: " + report,
            confirmButtonColor: "#00B4B4",
            imageUrl: "images/avatar/user.png",
        });
    });
</script>

var报告是一个链接，我需要在模式中显示该链接。我尝试了html:true等。html不再使用。而是使用内容对象。正如博士所说：

但作为一个新手，我无法理解这一点

请求有关如何在模式中显示链接以及如何在新窗口中打开链接的帮助

更新： 由于提供的解决方案不起作用，我使用了另一种使用html的方法来解决它。需要删除文本，否则文本将为默认值。代码笔链接：

正如文件所说，html已被弃用，不再有效

他们用内容取代了html，内容不再是字符串，而是对象

此内容对象如下所示：

content: {
    element: "input",
    attributes: {
      placeholder: "Type your password",
      type: "password",
    }
  }

content: {
    element: "a",
    attributes: {
      href : report
    }
  }

所以我想你可以像这样建立自己的链接：

content: {
    element: "input",
    attributes: {
      placeholder: "Type your password",
      type: "password",
    }
  }

content: {
    element: "a",
    attributes: {
      href : report
    }
  }

…然后只需将内容对象传递给swal：

注意，这是未经测试的，我不确定element:a是否有效。但无论如何，doc给出了一个更好的方法：

var slider = document.createElement("input");
slider.type = "range";

swal({
  content: slider
});

因此，您可以通过以下方式创建链接：

var link = document.createElement("a");
link.href= report;

swal({
  content: link
});

另一方面，您可以通过缓存$this对问题中提供的代码进行大量优化，因为创建和重用$this非常昂贵。此外，.attrdata-x还有一个缩写，.datax

或者更好：

var attributes = $(this).data()

它提供了一个包含所有数据属性的对象。然后，您可以通过以下方式访问：

text: "Gender: " + attributes['gender'] +"\n" + "Age: " + attributes['age'] +"\n" + "Country: " + attributes['country'] +"\n" + "State: " + attributes['state'] +"\n" + "Address: " + attributes['address'] +"\n" + "Report: " + attributes['report']

或在ES6中：

text: `Gender: ${attributes['gender']}\n
        Age: ${attributes['age']}\n
        Country: ${attributes['country']}\n
        State: ${attributes['state']}\n
        Address: ${attributes['address']}\n
        Report: ${attributes['report']}`

正如文档所说，html已被弃用，不再有效

他们用内容取代了html，内容不再是字符串，而是对象

此内容对象如下所示：

content: {
    element: "input",
    attributes: {
      placeholder: "Type your password",
      type: "password",
    }
  }

content: {
    element: "a",
    attributes: {
      href : report
    }
  }

所以我想你可以像这样建立自己的链接：

content: {
    element: "input",
    attributes: {
      placeholder: "Type your password",
      type: "password",
    }
  }

content: {
    element: "a",
    attributes: {
      href : report
    }
  }

…然后只需将内容对象传递给swal：

注意，这是未经测试的，我不确定element:a是否有效。但无论如何，doc给出了一个更好的方法：

var slider = document.createElement("input");
slider.type = "range";

swal({
  content: slider
});

因此，您可以通过以下方式创建链接：

var link = document.createElement("a");
link.href= report;

swal({
  content: link
});

另一方面，您可以通过缓存$this对问题中提供的代码进行大量优化，因为创建和重用$this非常昂贵。此外，.attrdata-x还有一个缩写，.datax

或者更好：

var attributes = $(this).data()

它提供了一个包含所有数据属性的对象。然后，您可以通过以下方式访问：

text: "Gender: " + attributes['gender'] +"\n" + "Age: " + attributes['age'] +"\n" + "Country: " + attributes['country'] +"\n" + "State: " + attributes['state'] +"\n" + "Address: " + attributes['address'] +"\n" + "Report: " + attributes['report']

或在ES6中：

text: `Gender: ${attributes['gender']}\n
        Age: ${attributes['age']}\n
        Country: ${attributes['country']}\n
        State: ${attributes['state']}\n
        Address: ${attributes['address']}\n
        Report: ${attributes['report']}`

---

为什么不试试下面的方法呢？我从来没有使用过sweet alert，但是在阅读了文档之后，我会尝试这样做

var link= document.createElement("a");
link.href =  report  // or link.setAttribute("href", report)


swal({
title: name,
text: "Gender: " + gender +"\n" + "Age: " + age +"\n" + "Country: " + country +"\n" + "State: " + state +"\n" + "Address: " + address +"\n" + "Report: " + report,
confirmButtonColor: "#00B4B4",
imageUrl: "images/avatar/user.png",
content:link
});
});

或

---

希望这有帮助

为什么不试试下面的方法呢？我从来没有使用过sweet alert，但是在阅读文档之后，我会尝试一下

var link= document.createElement("a");
link.href =  report  // or link.setAttribute("href", report)


swal({
title: name,
text: "Gender: " + gender +"\n" + "Age: " + age +"\n" + "Country: " + country +"\n" + "State: " + state +"\n" + "Address: " + address +"\n" + "Report: " + report,
confirmButtonColor: "#00B4B4",
imageUrl: "images/avatar/user.png",
content:link
});
});

或

---

希望对您有所帮助

如果您仍然无法找到解决方案，我尝试重新创建模式

---

希望能有帮助。注意：我没有使用与sweet alert中相同的过渡效果，因此请随意调整

如果您仍然无法找到解决方案，我尝试重新创建模式

希望能有帮助。注意，我没有使用与sweet alert中相同的过渡效果，因此请根据需要进行调整

正如Jeremy Thille在2017年10月31日10:36的评论中所发现的：

对于文本中的简单链接，不需要使用选项内容。 选项文本只能显示纯文本，不能显示html。 但是，选项html可以显示html

不要与旧版本SweetAlert 1.X混淆：您必须将html设置为true

在SeewtAlert2中，html直接在html选项中设置。在这种情况下，不要使用选项文本

在sweetAlert.version='6.9.1'中运行良好

Jeremy Thille的例子：

$('.patient-details').click(function(e) {
  e.preventDefault();
  var $this = $(this)
  var name = $this.data('name');
  var gender = $this.data('gender');
  var age = $this.data('age');
  var country = $this.data('country');
  var address = $this.data('address');
  var report = $this.data('report');

  swal({
  title: name,
  html:
      "Gender: " + gender +"<br>" +
     "Age: " + age +"<br>" +
     "Country: " + country +"<br>" +
     "Address: " + address +"<br>" +
     "Report: " + report +"<br>" +
      "<a href='report'>Report</a> " +
     "and other HTML tags"
  });
});

正如Jeremy Thille在2017年10月31日10:36的评论中所发现的：

对于文本中的简单链接，不需要使用选项内容。 选项文本只能显示纯文本，不能显示html。 但是，选项html可以显示html

不要与旧版本SweetAlert 1.X混淆：您必须将html设置为true

在SeewtAlert2中，html直接在html选项中设置。在这种情况下，不要使用选项文本

在sweetAlert.version='6.9.1'中运行良好

Jeremy Thille的例子：

$('.patient-details').click(function(e) {
  e.preventDefault();
  var $this = $(this)
  var name = $this.data('name');
  var gender = $this.data('gender');
  var age = $this.data('age');
  var country = $this.data('country');
  var address = $this.data('address');
  var report = $this.data('report');

  swal({
  title: name,
  html:
      "Gender: " + gender +"<br>" +
     "Age: " + age +"<br>" +
     "Country: " + country +"<br>" +
     "Address: " + address +"<br>" +
     "Report: " + report +"<br>" +
      "<a href='report'>Report</a> " +
     "and other HTML tags"
  });
});

找到这个答案，所有学分都归

const el=document.createElement'div' el.innerHTML=这是一个 游泳{ 标题：你好！， 内容：el， } 找到这个答案，所有学分都归

const el=document.createElement'div' el.innerHTML=这是一个 游泳{ 标题：你好！， 内容：el， }

---

如果您可以为训练提供任何JSFIDLE或codepen链接，那么确定确切的问题将更有帮助。如果您可以为训练提供任何JSFIDLE或codepen链接，那么确定确切的问题将更有帮助。不幸的是，它不起作用。var link=document.createElementa；link.href=报告；swal{content:link}；谢谢你的建议，一定有用。这正是文档中写的东西。@Jeremy Thille这是代码笔。.原来的那支，它不起作用，因为你有语法错误第18行。检查你的代码。Codepen告诉您它有一个错误。如果您修复了简单语法错误，请使用双引号而不是简单引号，它会工作。。。

---

这里：不幸的是，它不起作用。var link=document.createElementa；link.href=报告；swal{content:link}；谢谢你的建议，一定有用。这正是文档中写的东西。@Jeremy Thille这是代码笔。.原来的那支，它不起作用，因为你有语法错误第18行。检查你的代码。Codepen告诉您它有一个错误。如果您修复了简单语法错误，请使用双引号而不是简单引号，它会工作。。。这里：对不起，它不工作了。内容：{element:a，attributes:{href:report}}第一个呢？您是否也尝试了link.setAttributeRef，report？很抱歉，它不起作用。内容：{element:a，attributes:{href:report}}第一个呢？您是否也尝试了link.setAttributeRef，report？