0 
<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 タグにハードコーディングされています。しかし、入力タグ自体から上記のjquery関数にURLを渡したいです。適用ボタンをクリックするたびに、URLを上記のjQuery関数に渡す必要があります。

それは可能ですか？

4

2 に答える 2

1

data-...属性と jQuerydataメソッドを使用します。

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>
于 2013-07-28T00:46:51.900 に答える
1

はい、可能です....

これは を使用onblurし、ユーザーがボックスをクリックするとすぐに入力された値を読み取ります....そしてその値を関数に渡します...

またはonkeyup、 、またはchangeを実行して、ユーザーのタイプとして実行することもできます。

 $(document).ready(function() {
  $('ul').css({width: $('#containerdiv').width(),height:$('#containerdiv').height()})
 $('#close').click( function() { close() })

 $('#nj_apply').onblur( function() { 
   var url =  $(this).val();
   open(url); })

 });

 </script>

<td>
<input id= "nj_apply" type="text" />
</td>

上記の方法では、ボタンをクリックする必要さえありません。自動的に onblur が実行されます....しかし、ボタンをクリックする必要がある場合は、次のようにします....

あなたのJavaScriptで...

$('#applytheurl').click( function(e) {
   e.preventDefault(); 
 var url =  $("#nj_apply").val();
  open(url); })
 });

あなたのHTML...

 <td>
<input id= "nj_apply" type="text" />
<button id="applytheurl">GET PAGE</button>
</td>

編集

私はあなたが望んでいたものを誤解したかもしれません.....

以下のこの回答は、それぞれが異なるページに移動する複数のボタンを計画している場合です.....

あなたのHTML...

<td>
<input class="geturl" type="button" value="Apply" data-url="www.test.com" />
<input class="geturl" type="button" value="Apply" data-url="www.test2.com" />
<input class="geturl" type="button" value="Apply" data-url="www.test3.com" />
<input class="geturl" type="button" value="Apply" data-url="www.test4.com" />
</td>

あなたのJavaScript...

$('.geturl').click( function(e) {
 e.preventDefault(); 
 var url =  $(this).data('url');
 open(url); })
 });
于 2013-07-28T00:48:49.397 に答える