javascript - 将 url 传递给 jQuery 函数

Question

<script type="text/javascript"  src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>

function open(url) {
    $('#blockdiv').fadeIn();
    $('#iframe').attr('src', url);
    $('#containerdiv').fadeIn();   
}

function close() {  
    $('#blockdiv').fadeOut();
    $('#containerdiv').fadeOut();  
}

$(document).ready(function() {
  $('ul').css({width: $('#containerdiv').width(),height:$('#containerdiv').height()})
     $('#close').click( function() { close() })
     $('#nj_apply').click( function() { open('http://www.yahoo.com/') })

});

</script>

<td>
<input id= "nj_apply" type=button value="Apply" >
</td>

在上面的代码中，url (http://www.yahoo.com/) 被硬编码在 script 标签中。但我想将 url 从输入标记本身传递给上面的 jquery 函数。每当我单击“应用”按钮时，它都应该将 url 传递给上面的 jQuery 函数。

可以吗？

Answer 1

使用data-...属性和jQuery data方法:

function open(url) {
    $('#blockdiv').fadeIn();
    $('#iframe').attr('src', url);
    $('#containerdiv').fadeIn();   
}

function close() {  
    $('#blockdiv').fadeOut();
    $('#containerdiv').fadeOut();  
}

$(document).ready(function() {
  $('ul').css({width: $('#containerdiv').width(),height:$('#containerdiv').height()})
     $('#close').click( function() { close() })
     $('#nj_apply').click( function() { open($(this).data('url')); })

});

</script>

<td>
<input id= "nj_apply" type=button value="Apply" data-url="http://www.yahoo.com/">
</td>