文本内的Javascript Sweet Alert和html链接 [英] Javascript Sweet Alert and html link inside text
问题描述
我有以下SweetAlert代码.
<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.而是使用内容对象.正如文档所说:
https://sweetalert.js.org/docs/#content
https://sweetalert.js.org/guides/
但是我作为一个新手无法理解.
请求有关如何在模式中显示链接以及要在新窗口中打开的链接的帮助.
更新: 由于提供的解决方案无法正常工作，因此我使用了另一种使用html的方法来解决它.需要删除文字，否则文字将是默认文字. Codepen链接: https://codepen.io/pamela123/pen/GOJZgo
正如文档所说，html已被弃用，不再起作用.
他们已将html替换为content，不再是字符串，而是对象.
此content对象看起来像这样:
content: {
element: "input",
attributes: {
placeholder: "Type your password",
type: "password",
}
}
所以我想您可以像这样建立自己的链接:
content: {
element: "a",
attributes: {
href : report
}
}
...然后将content对象传递给swal:
swal({
content: {
element: "a",
attributes: {
href : report
}
}
})
请注意，这未经测试，我不确定element:"a"是否有效.但是无论如何，该文档提供了一种更好的方法:
var slider = document.createElement("input");
slider.type = "range";
swal({
content: slider
});
因此您可以通过以下方式创建链接:
var link = document.createElement("a");
link.href= report;
swal({
content: link
});
顺便说一句，您可以通过缓存$(this)(创建起来很昂贵)并重用它来极大地优化问题中提供的代码.另外，.attr("data-x")的缩写为.data("x").
var $this = $(this)
var name = $this.data('name');
var gender = $this.data('gender');
var age = $this.data('age');
var country = $this.data('country');
var state = $this.data('state');
var address = $this.data('address');
var report = $this.data('report');
甚至更好:
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']}`
i have the following SweetAlert Code..
<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>
The var report is a link and i need the link displayed in the modal. I tried html: true etc. html is no longer used. Instead use the content object. as doc says:
https://sweetalert.js.org/docs/#content
https://sweetalert.js.org/guides/
But i as a newbie is unable to make sense out of it.
Requesting help on how to display the link in the modal and the link to be opened in new window.
Update: Since the solutions provided were not working i used another approach using html to resolve it. Need to remove text, else text will be default. Codepen link: https://codepen.io/pamela123/pen/GOJZgo
As the doc says, html is deprecated and no longer works.
They have replaced html with content, which is not a string any longer, but an Object.
This content object looks like this :
content: {
element: "input",
attributes: {
placeholder: "Type your password",
type: "password",
}
}
So I guess you can build your own link like this :
content: {
element: "a",
attributes: {
href : report
}
}
...and then simply pass the content object to swal :
swal({
content: {
element: "a",
attributes: {
href : report
}
}
})
Note that this is untested, I'm not sure if element:"a" works. But anyway, the doc gives a better way :
var slider = document.createElement("input");
slider.type = "range";
swal({
content: slider
});
So you can create a link this way :
var link = document.createElement("a");
link.href= report;
swal({
content: link
});
As an aside, you can heavily optimize the code you provided in your question by caching $(this) (which is expensive to create) and reuse it. Also, .attr("data-x") has a shorthand, .data("x").
var $this = $(this)
var name = $this.data('name');
var gender = $this.data('gender');
var age = $this.data('age');
var country = $this.data('country');
var state = $this.data('state');
var address = $this.data('address');
var report = $this.data('report');
OR even better :
var attributes = $(this).data()
which gives an object containing all your data attributes. Which you can then reach using :
text: "Gender: " + attributes['gender'] +"\n" + "Age: " + attributes['age'] +"\n" + "Country: " + attributes['country'] +"\n" + "State: " + attributes['state'] +"\n" + "Address: " + attributes['address'] +"\n" + "Report: " + attributes['report']
Or in 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']}`
这篇关于文本内的Javascript Sweet Alert和html链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
