アプリ版：「スタンプのみでお礼する」機能のリリースについて

つらい・・・

Javascriptで可変のHTMLのID名を利用する方法

解決済

  • 質問者：yamakiyo2
  • 質問日時：
  • 回答数：4件

HTMLには、DIVで囲ったIDが「loading$j」という名前で作成していますが、PHPをはしょっていますが、＄ｊは可変の数値です。
この<div id="loading$j">内にボタンを押すと、prog_api_itemLookup.phpで取得した値を入力したいのですが、
IDが可変のため、Javascriptでどのように記載したらよいかわかりません。eval関数も用いてみましたが、うまく動作しませんでした。
Javascriptを$jの可変数分名前を付けて記載できるような気もしますが、あまりにも不細工ですので、このような場合に、どのように記載するのが良いのでしょうか？
ご教授方よろしくお願いします。

******HTML*******
<div id="loading$j"><img src='./web/images/gif-load20.gif'/></div></td>
<button type="button" onClick="getJanJs( this.form, $j );" >GET JAN</button>

******Javascript*******
function getJanJs( myForm, itemNum ) {
$.get("prog_api_itemLookup.php", "s1=getjan", function( getJan, status, xhr) {
if (status == "success") {
eval( "$( '#u_lc_janCode" + itemNum + "').html(getJan)" );
}
});
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

だいじょうぶ

No.4ベストアンサー

  • 回答者： fujillin
  • 回答日時：

ANo3です。



最初のご質問文で、かなりミスディレクションされてしまったようです。
PHPから返されるのは、短いテキストなのですね。

ANo3の補足に示されたHTMLの構造であるなら、
　function getJanJs( myElement, idForJan ) {
　　var elm = $(myElement).prevAll("input:first");
　　$.get("../prog_api_itemLookup.php", "s1=getjan&s2=" + idForJan, function(getJanResult) {
　　　elm.val(getJanResult);
　　});
　}
で、多分動作するのではと思います。

＜おまけ＞
id="hogehoge1"や class="blue small"が他に利用していない場合は設定する必要はありません。。
ANo2、3で例示したように、各ボタン全部に onclick="～～" を記述するよりも、スクリプトからイベント設定を行う方がより簡潔なHTMLになると思います。（idだけは要素属性として記述しておく必要がありますが）
    • good
    • 0
    • 件
通報する
この回答へのお礼

素晴らしいです。完璧です！！！
私の質問の仕方が良くなくて申し訳ございません。
次回から、正確にお伝えするようにします。
助かりました。これでちゃんとプログラムできます。

本当にありがとうございましたm(__)m

通報する
お礼日時：2015/06/02 14:45

参考程度に

No.3

  • 回答者： fujillin
  • 回答日時：

ANo2です。



お礼のサンプルを見ました。新しく<input>要素が登場しましたが、これって何なんだろう？
getした結果を表示するのはどこなのでしょう？ ますますわからなくなってきちゃいました。(^^;
また、ご提示の例だと送信するdataはいつも同じなので、返ってくる内容も一律だと想像されますが…それって予定通り？
私の勝手な解釈では、ボタンクリックによって、ボタン毎に違うデータを送信して違う結果を取得し、それをどこかに表示するものだと思ったのですが・・・

表示する要素は一か所で内容を変えながら表示するのか、ボタンと対になっていてそれぞれ表示するのかよくわかりません。
・・・と考えてみたら、送信用のdata（idなどなど）はボタン要素の属性として記述されている方が分かり易いですね。
HTMLの構成をどのようになさっているのかは、質問者様しかご存じないので、勝手な想像で回答していますので、最終的にはそちらの構成に合わるように変えてください。

ANo2ではクリック要素の特定にevent.targetを利用してましたが、jQueryではthis値で返されるのを忘れてました。そのままthisを利用できますね。
phpから返されるデータがどのようなものなのかわからないので、動くかどうかはわかりませんが２パターンの例を・・・（多少のコメントを付けました。サンプル2はANo2と同様です）
いろいろ想像をたくましゅうしているので、当たるも八卦かも? (^^;)

* 「id001」などは表示内容を特定するための文字列（=ID)。
* jQueryに関しては否定のコメントがないので、ご利用なさっているものと仮定。
* 構成がわからないので、必要最小限のid設定のみにしてクラスは削除しました。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
ul, li{ list-style-type: none; }
</style>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1");</script>
</head>
<body>


<h2>サンプル 1</h2>
<p>表示用要素は1箇所で共通に利用する構成
<div id="hyoujiYouso">共通表示用要素</div>

<p>以下のボタン群をクリックするとそのidを送信し表示
<div id="buttons">
<button type="button" id="id01">id01</button>
<button type="button" id="id02">id02</button>
<button type="button" id="id03">id03</button>
<button type="button" id="id04">id04</button>
</div>

<script type="text/javascript">
$(function(){
//サンプル1のボタンにクリックイベント処理を設定
$("#buttons button").on("click", function(){

//ボタン要素のidから送信用データ作成
var data = "s1=" + $(this).attr("id");

//ゲット送信で返された内容を共通表示用要素に表示
$.get("piyopiyo.php", data, function(result){
$("#hyoujiYouso").html(result);
});

});
});
</script>


<hr>
<h2>サンプル 2</h2>
<p>表示用要素とボタンがセットになっている構成<br>
下のボタンクリックで直前の要素に表示される
<ul id="articles">
<li>
<div>id001表示用要素</div>
<button type="button" id="id001">id001</button>
</li>
<li>
<div>id002表示用要素</div>
<button type="button" id="id002">id002</button>
</li>
<li>
<div>id003表示用要素</div>
<button type="button" id="id003">id003</button>
</li>
</ul>

<script type="text/javascript">
$(function(){
//サンプル2のボタンにクリックイベント処理を設定
$("#articles button").on("click", function(){

//表示用要素として、ボタンの前にある兄弟要素（DIV)を取得
var elm = $(this).prev("div").eq(0);

//ボタン要素のidから送信用データ作成
var data = "s1=" + $(this).attr("id");

//ゲット送信で返された内容を対応する表示用の要素に表示
$.get("piyopiyo.php", data, function(result){
elm.html(result);
});

});
});
</script>

</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

本当にありがとうございます。助かっています。jqueryは利用しています。
inputの入力欄がボタンを押下した場合に、取得した値に置き換えたいです。
すみませんが、ご教授方よろしくお願いします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>Sample</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1");</script>
</head>
<body>

<form>
　　<input id="hogehoge1" class="blue small" value="hogehoge1" /><br>
　　<button type="button" onClick="getJanJs( this, 'B00ASJVQHY' );">GET JAN</button><br>
　　<input id="hogehoge2" class="blue small" value="hogehoge2" /><br>
　　<button type="button" onClick="getJanJs( this, 'B00DQLQZDQ' );">GET JAN</button><br>
</form>

<script type="text/javascript">
<!--

function getJanJs( myElement, idForJan ) {
　var elm = $(myElement).prev("input").eq(0);
　$.get("../prog_api_itemLookup.php", "s1=getjan&s2=" + idForJan, function( getJanResult, status, xhr) {
　　alert (getJanResult);
　　elm.html(getJanResult);
　});
}

//-->
</script>

</body>
</html>

通報する
お礼日時：2015/06/02 12:07

参考程度に

No.2

  • 回答者： fujillin
  • 回答日時：

よく理解できてませんが・・・



同様の処理を複数個所で行うような場合、idを利用せずにHTMLの構造上の規則性を利用する場合が多いと思います。
あるいは、idではなくclassを利用して特定するのに利用してもよろしいかと。
ご質問のケースの場合は、いずれにしろサーバーへidを送るのでidでも同じことと言えばそれまでですが…

また、ご質問文では単独で『</td>』タグがあったり、『this.form』がどの要素をさしているのか等、HTMLの構成が不明なのでよくわかりませんが、以下に考え方の例としてご参考までに。（構成は勝手に仮定しています）
また、雰囲気からjQeryを利用しているものと仮定しましたが、jQuery利用であれば各要素に毎回onclick属性を設定しなくてもまとめてバインドした方がHTMLがすっきりしますよね。


【 HTML 】
例えば、以下のようなマークアップを仮定したとして…
<ul>
　<li>
　　<div id="hogehoge" class="loadTarget">hogehoge</div>
　　<button type="button" class="trigger">GET JAN</button>
　</li>
　<li>
　　<div id="fugafuga" class="loadTarget">fugafuga</div>
　　<button type="button" class="trigger">GET JAN</button>
　</li>
　<li>
　　<div id="hogefuga" class="loadTarget">hogefuga</div>
　　<button type="button" class="trigger">GET JAN</button>
　</li>
　・・・・・・
</ul>


【 script 】(以下イメージ）
$(function(){
　$("button.trigger").on("click", function(evt){
　　var elm = $(evt.target).prev(".loadTarget").eq(0);
　　if(elm){
　　　var id = elm.attr("id");
　　　$.get("piyopiyo.php", {s1: id}, function(result){
　　　　elm.html(result);
　　　});
　　}
　});
});

みたいな考え方ではどうでしょうか？

idの最初に接頭辞がついているのなら、それを利用すればクラスの設定はなくても識別可能ですが、質問文からではよくわからないので、とりあえず確実な方法としてクラス設定しています。
もしも、例示のような単純（or明快）な構成であればUL要素さえ特定できればいいので、それ以外の要素にはクラスを設定する必要もなくなります。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
とても参考になります。というか良くわからないところも多いです。
頂いたのを参考に試してみましたが、移殖するときに間違っているのかうまく動きませんでした。
できるだけ今のCSSやPHPなどの影響を最小にしたいので、以下のことをしたいです。
prevで何か指定しないといけないでしょうか？elmが取得できていないようにも見えます。
動かないので、何が問題かご教授方よろしくお願いします。

<form>
<ul>
　<li>
　　<input id="hogehoge1" class="blue small" value="hogehoge1" />
　　<button type="button" onClick="getJanJs( this );">GET JAN</button>
　</li>
　<li>
　　<input id="hogehoge2" class="blue small" value="hogehoge2" />
　　<button type="button" onClick="getJanJs( this );">GET JAN</button>
　</li>
　<li>
　　<input id="hogehoge3" class="blue small" value="hogehoge3" />
　　<button type="button" onClick="getJanJs( this );">GET JAN</button>
　</li>
　・・・・・・
</ul>
</form>

function getJanJs( myElement ) {
　var elm = $(myElement).prev().eq(0);
　$.get("mainProg/prog_api_itemLookup.php", "s1=getjan", function( getJanResult ) {
　　elm.html(getJanResult);
　});
}

通報する
お礼日時：2015/06/01 22:46

うーん・・・

No.1

  • 回答者： hitomura
  • 回答日時：

……?


$j って PHP での変数ですよね。つまり、サーバーで処理されてブラウザで表示する HTML では何らかの文字列に置き換わっているはずですよね。その結果がご呈示の内容の、$j が残った HTML でしょうか。それともきちんと置き換えはできていますでしょうか。
それと、u_lc_janCode で始まる id を持つ要素が HTML の提示されている範囲にはないのですが、これは他にそういう要素があるという事でよろしいでしょうか。

というか、なんで eval を使おうと思ったのですか。ご呈示の JavaScript の内容では使う意味は全くありません。そもそも eval なんて普通の人が使わなくてはならない場面はまずありません。

とりあえず、以下のようにすればうまくいくと思いますが……。
……もしうまくいかないならば、onClick の中のほうの <?php echo $j; ?> を ' でくくってみてください。それでもだめならどううまくいかないのか補足願います。

******HTML というか PHP*******
<div id="loading<?php echo $j; ?>"><img src='./web/images/gif-load20.gif'/></div></td>
<button type="button" onClick="getJanJs( this.form, <?php echo $j; ?> );" >GET JAN</button>

******Javascript*******
function getJanJs( myForm, itemNum ) {
$.get("prog_api_itemLookup.php", "s1=getjan", function( getJan, status, xhr) {
if (status == "success") {
$('#u_lc_janCode' + itemNum).html(getJan);
}
});
}
    • good
    • 0
    • 件
通報する
この回答へのお礼

大変ありがとうございます
ご指摘のようにPHPなどに誤りがあり意図が見えなかったかもしれません。
DIVの中の”u_lc_janCode”が$jの数だけあります。たとえば100個のDIVのID”u_lc_janCode”は1~100まであります。
ここにJavascriptを100個Functionを書いてしまえば良いですが、$jをJavascriptで”itemNum”で渡して、ID名をそれを使ってやろうと思っています。
教えて頂いた「$('#u_lc_janCode' + itemNum).html(getJan);」では動作しませんでした。getJan変数には正確に値が入っていますが、例えば、DIVのID名が”u_lc_janCode1”に置き換わりません。
何の問題があるかわかりますでしょうか？
すみませんが、よろしくお願いします。

******HTML というか PHP*******
<div id="u_lc_janCode<?php echo $j; ?>"><img src='./web/images/gif-load20.gif'/></div>
<button type="button" onClick="getJanJs( this.form, <?php echo $j; ?> );" >GET JAN</button>

******Javascript*******
function getJanJs( myForm, itemNum ) {
$.get("prog_api_itemLookup.php", "s1=getjan", function( getJan, status, xhr) {
if (status == "success") {
$('#u_lc_janCode' + itemNum).html(getJan);
}
});
}

通報する
お礼日時：2015/06/01 08:35

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報