jQuery の replace の質問です。


input要素[ id="ajaxSave" ]で取得した値を、ul>li要素[ class="sortLink" ]の最後にあるパラメーターの[ &q= ]に4行ともセットしようと考えていますが、これまたうまくいきません。
現在試しているコードは以下に添付しました。

症状として、
パラメーターのorderやdasortの値を変えて4種書いているのですが、以下のコードを試すと4行ともすべて1行目と同じURLになってしまいます。
[ &q= ]の値はうまくセットされていますが、4行とも以下URLになる。
https://abc-com.ssl-xserver.jp/quiz/?fbid=1022&order=id&dasort=desc&q=xxx
つまり2行目も4行目も、orderはidに、dasortはdescになってしまうのです。
どなたか以下を考慮し、他のul>li要素に干渉することなく、4行の[ &q= ]だけに[ id="ajaxSave" ]の値をセットできるようコードの添削校正をよろしくお願いします。

(1)[ &q= ]はSmartyから受け取った値がセットされている場合もありますし空の場合もあります。例、[ &q=13 ] [ &q=%83e%83X%83g ]
(2)[ &q= ]は後にもパラメーターが続く可能性があります。例、[ &q=20&k=xxx ]

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/11/03 02:42:23
  • 終了:2013/11/03 11:21:55
id:appfb

質問者から

appfb2013/11/03 11:36:53
<!DOCTYPE html>
<html lang="ja">
<head>
   <{$content_type|smarty:nodefaults}>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   <script type="text/javascript" src="../js/textchange/jquery.textchange.min.js"></script>
</head>

<body>
<span class="wrap">
   <input id="ajaxSave" type="text" name="qKey" value="<{$query}>" size="25">
</span>
<span id="ajaxFired" class="wrap"></span>
<ul>
   <li class="sortLink"><a href="./?fbid=<{$fb_id}>&order=id&dasort=desc&q=<{$query}>">ID▼</a></li>
   <li class="sortLink"><a href="./?fbid=<{$fb_id}>&order=id&dasort=asc&q=<{$query}>">ID▲</a></li>
   <li class="sortLink"><a href="./?fbid=<{$fb_id}>&order=mod&dasort=desc&q=<{$query}>">DATE▼</a></li>
   <li class="sortLink"><a href="./?fbid=<{$fb_id}>&order=mod&dasort=asc&q=<{$query}>">DATE▲</a></li>
</ul>
</body>

<script>
var timeout;
$('#ajaxSave').bind('textchange', function () {
   clearTimeout(timeout);
   $('#ajaxFired').html('Typing...');
   var self = this;
   timeout = setTimeout(function () {
      var sortLink = $('.sortLink a');
      var query = encodeURIComponent($("#ajaxSave").val()); 
      $('#ajaxFired').html('Saved: ' + $(self).val());
      sortLink.attr('href', sortLink.attr('href').replace(/&q=[^&]*/, '&q=' + query));
   }, 1000);
});
</script>

</html>

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4562ベストアンサー獲得回数19062013/11/03 07:23:11

ポイント100pt

こんな感じです。

var timeout;
$('#ajaxSave').bind('textchange', function () {
   clearTimeout(timeout);
   $('#ajaxFired').html('Typing...');
   var self = this;
   timeout = setTimeout(function () {
//      var sortLink = $('.sortLink a');
      var query = encodeURIComponent($("#ajaxSave").val()); 
      $('#ajaxFired').html('Saved: ' + $(self).val());
//      sortLink.attr('href', sortLink.attr('href').replace(/&q=[^&]*/, '&q=' + query));
      // ★こういうふうに変えました
      $('.sortLink a').each(function() {
            $(this).attr('href', $(this).attr('href').replace(/&q=[^&]*/, '&q=' + query));
         });
   }, 1000);
});


元のコードだと sortLink.attr('href', ...) は、第二引数の値を四つの A 要素にセットしますが、指定している値はひとつだけです。

.attr()

Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.

http://api.jquery.com/attr/


あ、マニュアルを見てて気がついた。こういうふうにも書けます。

<script>
var timeout;
$('#ajaxSave').bind('textchange', function () {
   clearTimeout(timeout);
   $('#ajaxFired').html('Typing...');
   var self = this;
   timeout = setTimeout(function () {
      var sortLink = $('.sortLink a');
      var query = encodeURIComponent($("#ajaxSave").val()); 
      $('#ajaxFired').html('Saved: ' + $(self).val());
//      sortLink.attr('href', sortLink.attr('href').replace(/&q=[^&]*/, '&q=' + query));
      // ★こんなふうにも書けました
      sortLink.attr('href', function(i, val) {
            return val.replace(/&q=[^&]*/, '&q=' + query);
         });
   }, 1000);
});
id:appfb

ご回答ありがとうございます。
バッチリ動作いたしました!
いつもながら恐れ入ります。

今回は私にとって難易度が高かったのですが、マニュアルと教えていただいたコードを見比べ、自分のものにしていきたいと思います。
ありがとうございました。

2013/11/03 11:21:41

その他の回答(0件)

id:appfb

質問者から

appfb2013/11/03 03:43:22

質問文を編集しました。詳細はこちら

id:a-kuma3 No.1

a-kuma3回答回数4562ベストアンサー獲得回数19062013/11/03 07:23:11ここでベストアンサー

ポイント100pt

こんな感じです。

var timeout;
$('#ajaxSave').bind('textchange', function () {
   clearTimeout(timeout);
   $('#ajaxFired').html('Typing...');
   var self = this;
   timeout = setTimeout(function () {
//      var sortLink = $('.sortLink a');
      var query = encodeURIComponent($("#ajaxSave").val()); 
      $('#ajaxFired').html('Saved: ' + $(self).val());
//      sortLink.attr('href', sortLink.attr('href').replace(/&q=[^&]*/, '&q=' + query));
      // ★こういうふうに変えました
      $('.sortLink a').each(function() {
            $(this).attr('href', $(this).attr('href').replace(/&q=[^&]*/, '&q=' + query));
         });
   }, 1000);
});


元のコードだと sortLink.attr('href', ...) は、第二引数の値を四つの A 要素にセットしますが、指定している値はひとつだけです。

.attr()

Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.

http://api.jquery.com/attr/


あ、マニュアルを見てて気がついた。こういうふうにも書けます。

<script>
var timeout;
$('#ajaxSave').bind('textchange', function () {
   clearTimeout(timeout);
   $('#ajaxFired').html('Typing...');
   var self = this;
   timeout = setTimeout(function () {
      var sortLink = $('.sortLink a');
      var query = encodeURIComponent($("#ajaxSave").val()); 
      $('#ajaxFired').html('Saved: ' + $(self).val());
//      sortLink.attr('href', sortLink.attr('href').replace(/&q=[^&]*/, '&q=' + query));
      // ★こんなふうにも書けました
      sortLink.attr('href', function(i, val) {
            return val.replace(/&q=[^&]*/, '&q=' + query);
         });
   }, 1000);
});
id:appfb

ご回答ありがとうございます。
バッチリ動作いたしました!
いつもながら恐れ入ります。

今回は私にとって難易度が高かったのですが、マニュアルと教えていただいたコードを見比べ、自分のものにしていきたいと思います。
ありがとうございました。

2013/11/03 11:21:41

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません