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

急いでいます！

javascriptで、クエリーを実現したい。それを実現する為の方法を知りたい

解決済

  • 質問者：usui-2015
  • 質問日時：
  • 回答数：2件

下記のhtmlが有ります。
<html>
　<head><title>早死に10訓</title></head>
　<body>
　　<p>夢も希望も亡くなった人は下記を参照</p>
　　<ol>
　　　<LI>毎日朝から酒を腹一杯飲む事</LI>
　　　<LI>奥さんと欠かさずに24時間交尾をする事</LI>
　　　<LI>朝から晩迄耐える事無く一時の休みも無く奥さんの浮気を心配する事</LI>
　　　<LI>食事は、常に腹一杯無理してでも食べる事</LI>
　　　<LI>塩辛い物は、遠慮しないで食べる事</LI>
　　　<LI>奥さんが浮気をしているので間男を殺す事ばかりを考える事</LI>
　　　<LI>以下省略</LI>
　　</OL>
　</body>
</html>
上記のhtmlでスクリプトで検索キーワードの入力で「殺す」と入力した時にその行だけを
表示するjavascriptを作りたいのですが。これは、linkオブジェクトを編集するだけで出
来るのでしょうか。

javascriptは初心者で良く理解をしていませんが。要は、下記のイメージで作られる事を
想定しています。
<html>
　<head><title>早死に10訓</title></head>
　<body>
　　<p>夢も希望も亡くなった人は下記を参照</p>
　　<ol>
　　　<LI>奥さんが浮気をしているので間男を殺す事ばかりを考える事</LI>
　　</OL>
　</body>
</html>

linkオブジェクトのプロパティとかメソッドとかを指摘願います。どちらかと言うとその
物ずばりのjavasceiptを提示戴けると有り難いのですが。これは、document.writeで書く
のでしょうか。

これに関してはjqueryとかも有る様ですが。これを使うのでしょうか。分かりません。宜
しくお願いします。

質問者からの補足コメント

  • 遅くなりましたが、確かにきちんと私が思っていた通りに動きました。有難う御座います。これを機会に更なる啓発に努力したいと思います。

    No.1の回答に寄せられた補足コメントです。 補足日時：2015/09/13 09:53
    通報する

  • うれしい

    なるほどね。こう言う事も出来るんですね。まだまだ私には手の届かない範囲です。将来の参考にさせていただきます。有難う御座いました。遅くなり申し訳ございませんでした。

    No.2の回答に寄せられた補足コメントです。 補足日時：2015/09/13 10:03
    通報する
通報する

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

質問の本文を隠す

A 回答 (2件)

No.1ベストアンサー

  • 回答者： yambejp
  • 回答日時：

javascriptでかなり手を抜いてやると、こんなかんじ



<script>
function choice(){
var reg=new RegExp(document.getElementById("keyword").value);
var obj=document.getElementById("target").getElementsByTagName("li");
for(var i=0;i<obj.length;i++){
obj[i].className=(obj[i].innerHTML.match(reg))?"":"hide";
}
}
</script>
<style>
li.hide{display:none;}
</style>

<p>夢も希望も亡くなった人は下記を参照</p>
<ol id="target">
<LI>毎日朝から酒を腹一杯飲む事</LI>
<LI>奥さんと欠かさずに24時間交尾をする事</LI>
<LI>朝から晩迄耐える事無く一時の休みも無く奥さんの浮気を心配する事</LI>
<LI>食事は、常に腹一杯無理してでも食べる事</LI>
<LI>塩辛い物は、遠慮しないで食べる事</LI>
<LI>奥さんが浮気をしているので間男を殺す事ばかりを考える事</LI>
<LI>以下省略</LI>
</OL>
<input type="text" name="keyword" id="keyword">
<input type="button" value="choice" onclick="choice()">
この回答への補足あり
    • good
    • 0
    • 件
通報する
この回答へのお礼

早速の返事有難う御座います。さっき図書館から本を読んで今読んでいる所です。今の私のスキルは、「箸にも棒にもならないスキル」ですが。何か難しそうです。失敗して悪戦苦闘する事を肝に銘じてやって見ます。有難う御座いました。

通報する
お礼日時：2015/09/07 16:51

No.2

  • 回答者： Ogre7077
  • 回答日時：

インクリメンタルサーチっぽく実現



<script>
window.addEventListener('DOMContentLoaded', function(){
var timerId = 0, preValue = '', field = document.querySelector('#quick-input');
function selectItems() {
if (timerId) window.clearTimeout(timerId), timerId = 0;
var a = field.value.trim();
if (preValue == a) return; else preValue = a;
Array.prototype.slice.apply(document.querySelectorAll('ol#quick-items > li')).forEach(function(e){ e.style.display = (a.length>0&&e.textContent.indexOf(a)<0)? 'none': '' });
}
field.addEventListener('keyup',function(ev){if (timerId) window.clearTimeout(timerId); timerId = setTimeout(selectItems, 1000)},false);
field.form.addEventListener('submit',function(ev){ev.preventDefault();selectItems()},false);
}, false);
</script>

<article>
<p>送る言葉
<form name=quick><input type=text id=quick-input></form>
<ol id=quick-items>
<li>going my way
<li>なせばなる なさねばならぬ
<li>人の行く 裏に道あり 花の山
<li>のんびり行こうよ 人生は
<li>美味しいお菓子を分けてあげたい友達
</ol>
</article>
この回答への補足あり
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報