jqueryで2つ書くと1つ目が機能しなくなります。

Question

何度も試すのですがうまく機能しないのでアドバイス願います。

現在、Wordpress上で#messageにセットされている文字を取得して、フォームのinputの#infoにその取得した文字を埋め込んでいるのですが、1つの場合だと動くのですが、2つ以上設定すると以前に設定した内容が機能しなくなってしまいます。

何か書き方が悪いのでしょうか？または何かルールがありますでしょうか？
以下だと動きます。

jQuery(function(){
var data = jQuery("#message").text();
jQuery("#info").val(data);
});

こちらだと前者の設定が動かなくなってしまいます…。

// A というカテゴリで使用。
jQuery(function(){
var message = jQuery("#message").text();
jQuery("#info").val(message);
});

// B というカテゴリで使用。
jQuery(function(){
var comment = jQuery("#comment").text();
jQuery("#info").val(comment);
});

記述は、別ファイルに書いてすべてのページで読み込んで利用しています。
何がいけませんでしょうか、宜しくお願いします。

Answer 1

競合する処理ですよね？
あとから実行している処理が上書きしているだけだと思います
onメソッドなどでなにかの作業をトリガーに書き換えれば共存できると思います

Comments

[yukina00235]

有難うございます、onメソッドを調べてみたいと思います。

Answer 2

?

jQuery(function(){
    var data = jQuery("#message").text();
    jQuery("#info").val(data);
    
    var message = jQuery("#message").text();
    jQuery("#info").val(message);
});

まず質問者様の2つの内容をまとめるとこうなります。

1. id="mseeage" のテキストを[data]変数に代入
2. id="info" のvaluseに[data]変数に代入
3. id="mseeage" のテキストを[mseeage]変数に代入
4. id="info" のvaluseに[mseeage]変数に代入

代入された変数が異なるだけで同じところから値を取得して
同じところに代入していますよね？

それでは2つとも「全く同じ動き」をしているだけですが...

Comments

[yukina00235]

var data = jQuery("#message").text();
jQuery("#info").val(data);

var comment = jQuery("#comment").text();
jQuery("#info").val(comment);

Bのカテゴリでは、#commentを取得して#infoにcommentとして別の値を埋め込んでいるのですが、だめなのでしょうか。取得するものは違いますが、埋め込む場所は#infoとなってしまいます。

[kuma_kuma_]

?質問の間違い？今書かれている内容と質問で書かれている内容違いますが...
今書かれている内容を実行したら
id="info"のvalueの値がid="comment"の文字と同じになるだけですよ？

あと今の状態ではなぜ「id="info"のvalueの値を変更するのか？」の意味が不明過ぎて
良い悪いは答えられませんが...

Answer 3

別ファイルに書いてすべてのページで読み込んで利用しています。

しかしながらAというカテゴリ、Bというカテゴリを区別する記述がありません。
ということは全ページで同じタイミング（ドキュメントロード）で動作します。

今回のようなjQuery(function(){は複数書く意味がありません。
結局は「ドキュメントが読み込まれたら」の意味です。
その後は書かれた順番に上から実行していきます。

または何かルールがありますでしょうか？

この場合は「自分でルールを作る」となります。
イベントを発火させるタイミングを明示的に区別させる必要があります。
ページなのか、何かしらクリックしたときなのか、それは要件次第ですし、
提示された情報だけでは他者には判断できません。