やりたいこと

「.sample」の中に特定の文字が存在する場合（例）りんご）、「.aaa」に指定のhtmlを表示という<br>
処理をおこないたいのですが、以下書き方でうまくいきません。
自分なりに調べてみたのですが「indexOf」のが適切なのでしょうか？

<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script>
 jQuery(function(){	
	 if(".sample:contains('りんご')"){
   	    jQuery(".aaa").load("apple.html");	
     }	 
	 else if(".sample:contains('みかん')"){
   	    jQuery(".aaa").load("orange.html");	
	 }
	 else{
        jQuery(".aaa").load("other.html");	
      }
 });	 
 
</script>	 
</head>

<body>

	 <div class="sample">りんご</div>
	 <div class="aaa"></div>
	 
</body>
</html>

行動規範の内容に同意します

回答1件

.sampleのテキストを調べるのでしょうか？
完全一致なのか部分一致なのかによります

javascript
1<script>
2$(function(){
3  if($('.sample').filter(function(){return $(this).text().match(/りんご/);}).length>0){
4    console.log('りんご'); //ヒットする
5  }
6  if($('.sample2').filter(function(){return $(this).text().match(/みかん/);}).length>0){
7    console.log('みかん'); //ヒットする
8  }
9  if($('.sample').filter(function(){return $(this).text().match(/ぶどう/);}).length>0){
10    console.log('ぶどう'); //ヒットしない
11  }
12});
13</script>
14
15<div class="sample">りんご</div>
16<div class="sample2">あるみかん</div>

addClassとの組み合わせ

javascript
1$(function(){
2  $('.sample').filter(function(){return $(this).text().match(/りんご/);}).addClass('apple');
3  $('.sample2').filter(function(){return $(this).text().match(/みかん/);}).addClass('orange');
4  $('.sample').filter(function(){return $(this).text().match(/ぶどう/);}).addClass('grape')
5});
6</script>
7<div class="sample">りんご</div>
8<div class="sample2">あるみかん</div>

投稿2019/09/09 07:14

編集2019/09/09 10:50

yambejp

総合スコア116694

fight

2019/09/09 07:42

回答ありがとうございます！！＞.sampleのテキストを調べるのでしょうか？はい、そのとおりですが、目的としてはテキストの内容によって同一ページ内にコンテンツの出し分けをおこないたいというのがあります。完全一致なのか部分一致なのかによります＞部分一致です。サンプルでいただいたのはmatchなので完全一致パターンでしょうか。

yambejp

2019/09/09 07:50

> matchなので完全一致パターン matchはむしろあいまい検索用の処理なので部分一致のつもりで書いてあります提示したサンプルのコピペで動作が違うようなら指摘してください

fight

2019/09/09 09:11

yambejp様試してみたところ、 if条件を無視して、そのまま処理がおこなわれました・・・。

yambejp

2019/09/09 09:26

ヒットする例しかなくてわかりづらかったようなのでヒットしないものも書いておきました ifを無視しているわけじゃありません

fight

2019/09/09 10:42

yambejp様ありがとうございます。ログは確認できました！ただ、この console.log('りんご'); の部分を例えば $(".sample").addClass("abc"); にしたい場合、反映されません・・私の書き方が悪いのは、そもそもできないのでしょうか。初歩的あ質問ですいません

yambejp

2019/09/09 10:51

> $(".sample").addClass("abc"); jQueryの特徴を理解してください。その手の処理は「if」を使いません。フィルタしたオブジェクトに直接addClassして構いませんヒットしなければaddClassされないだけなので

fight

2019/09/10 08:45

なるほど・・・となると私が本来の「やりたいこと」ではなくなるような気がします。テキストを調べるのが最終目的ではなく、テキストを調べてその条件にあったｈｔｍｌを読み込ませるというのが本来の目的であります。例）jQuery(".aaa").load("apple.html"); もしよろしければ、その方法がわかればご教示いただきたいです。。

行動規範の内容に同意します