hrefのurl記述に応じて同一行のボタンの表示／非表示を切り替えたい

私はこれまでに、PHP,MySQLにajaxを組み合わせて、DBに登録したyoutube動画を観られるサイトを作成しておりました。
以下のコードにあるように、「視聴する」ボタンをクリックすると、（「視聴する」ボタンを押した行の動画リンクのhrefに埋め込まれたURLの、watch?v=以降の記述が反映された）youtube動画の画面が、テーブルの下に出てくるようにしております。

しかし今回は、リンク先のコードの内容に応じてボタンの表示を切り替えようとしております。

HTML
1<body>
2  <table>
3    <thead>
4      <tr>
5        <th>#</th>
6        <th>Group</th>
7        <th>Title</th>
8      </tr>
9    </thead>
10    <tbody>
11      <tr role="row" class="even">
12          <td class="showTube sorting_1"><button>視聴する</button></td>
13          <td>ラジオドラマ</td>
14          <td><a href="https://www.youtube.com/watch?v=6bcmAisx3Cw" target="_blank" onclick="return confirm('このサイトに移動しますか？')">シュナの旅【ジブリの原点】</a></td>
15      </tr>
16      <tr role="row" class="odd">
17          <td class="showTube sorting_1"><button>視聴する</button></td>
18          <td>ラジオドラマ</td>
19          <td><a href="https://www.youtube.com/watch?v=aHwJo2-u2B4&amp;t=83s" target="_blank" onclick="return confirm('このサイトに移動しますか？')">ラジオドラマ「グスコーブドリの伝記」</a></td>
20      </tr>
21      <tr role="row" class="even">
22          <td class="showTube sorting_1"><button>視聴する</button></td>
23          <td>リラクゼーションBGM</td>
24          <td><a href="https://www.youtube.com/watch?v=HFraWaDL2OU&amp;t=150s" target="_blank" onclick="return confirm('このサイトに移動しますか？')">Japanese Music - Shakuhachi flute The Art of blowing Zen</a></td>
25      </tr>
26      <tr role="row" class="odd">
27          <td class="showTube sorting_1"><button>視聴する</button></td>
28          <td>リラクゼーションBGM</td>
29          <td><a href="https://www.youtube.com/watch?v=8nubXh-Oouo" target="_blank" onclick="return confirm('このサイトに移動しますか？')">Japanese Meditation &amp; Ambient Relaxing Sounds | THE LAST SAMURAI Music</a></td>
30      </tr>
31    </tbody>
32  </table>
33</body>

それぞれの行の「視聴する」ボタンの二つ右のカラムに表示されているリンクの、href内に埋め込んだURLに、
（１）watch?v= が存在する、かつ、
（２）& が含まれていない場合、
同一行の「視聴する」ボタンのdisplayがnoneになり、画面に表示されないようにしたいのですが、これを可能とする処理をJQueryかCSSで行うとしたら、どのような記述がふさわしいでしょうか。

畏れながら、今回もご教示宜しくお願いします。

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

回答1件

ベストアンサー

とてもざっくりではありますが、
一応こちらで動作確認済みです。

$(function(){
  $('a').each(function(i,e){
    const href = $(e).attr("href")
    if(href.match(/watch?v=/) && !href.match(/\&/)){
      $(e).parent().siblings(".showTube").children().css("display","none")
    }
  })
});

質問者様のご要望に適っているでしょうか？

投稿2020/12/05 22:38

編集2020/12/05 22:39

tomtomtomtom

総合スコア563

tomtomtomtom

2020/12/06 03:04

解決されたようで良かったです。また機会がありましたら宜しくお願い致します。

Nishin

2020/12/06 03:09

ご回答ありがとうございます。また、要望のみの回答となってしまい、失礼致しました。これまでに「$(":contains('○○')")」の方法で試みておりましたが、すべての「視聴する」ボタンが消えてしまい積んでおりましたが、「.each」を使えば解消できるのですね。あと、誤表記と記入漏れがございました。 displayはnoneでなくて、blockでした。そしてcss部分に、button{display:none}としておく事の記述が抜けておりました。こちらについてもお詫び致します。

Nishin

2020/12/06 03:10

改めて、御礼申し上げます。こちらこそ、また機会がありましたら、宜しくお願い致します。

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