嗨,我之前询问过如何通过单击按钮而不是在页面加载之前加载div的内容(URL),我得到了以下代码作为答案:
<script type="text/javascript">
function toggleDiv(id){
if ($('#' + id).html() == '') {
$.ajax({
url: 'api.microsofttranslator.com/V2/Ajax.svc/Translate?appId=SOMETHING&from=en&to=de&text=Hello', // your url to microsoft translator
success: function(data) {
$('#' + id).html(data);
},
error: function() {
$('#' + id).html('The resource could not be loaded');
}
});
}
$('#' + id).toggle(); // Toggle div visibility
}
</script>
<a href="#" onclick="toggleDiv('a')">Show/Hide Value</a>
<div id="a" style="display:none"></div>
首先,如果您放置txt链接(例如(http://knowpersia.com/a.txt)),它也将无法正常工作,并且始终显示“无法加载资源”。
其次,“显示/隐藏值”链接使用href =#和onclick系统起作用。当我在网站上使用它时,单击它会返回到主页。有没有一种方法可以将其更改为:
<a href="javascript:toggleDiv('a')">Show/Hide Value</a>
谢谢
最佳答案
您必须将id
传递给toggleDiv()
函数,并且要传递对象的集合-> toggleDiv('a') // Nop
。
另外,如果您使用的是jQuery,我建议您摆脱那些难看的内联代码。然后,您可以将jQuery对象传递到函数中:
<a href="#" id="link">Show/Hide Value</a>
<div id="content"></div>
。
var toggleDiv = function($el) {
if ($el.empty()) { // You can just use `empty()`
$.ajax({
url : 'api.microsofttranslator.com/V2/Ajax.svc/Translate?appId=SOMETHING&from=en&to=de&text=Hello', // your url to microsoft translator
success : function (data) {
$el.html(data);
},
error : function () {
$el.html('The resource could not be loaded');
}
});
}
$el.toggle(); // Toggle div visibility
};
$('#link').click(function(){ toggleDiv($('#content')); });