CGIで動的に生成されるユニークな1ページのみにハイパーリンク付のテキストが表示され、他のページにはそのテキストは表示されない仕組みの JavaScriptとCSSの書き方を教えてていただけますでしょうか?


CGI本体には手を付けないという条件になります(手を付けた場合かなり複雑になるかと思い、思ったように作動しないときのリカバリーに手がかかりそうゆえ)

JavaScriptでURLのパラメータを抽出し(パラメータは/detail.cgi?page=1&status=viewのうちpage=1の数字部分が変化します ただpage=10やpage=11も存在しますのでpage=1&まで抽出して条件判断できればと思います

CSSは属性セレクタのE[foo*=”bar”]が利用できるのでしょうか?

よろしくお願いいたします

回答の条件
  • 1人10回まで
  • 13歳以上
  • 登録:2016/05/16 17:27:20
  • 終了:2016/06/13 07:32:37

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4412ベストアンサー獲得回数18032016/05/19 00:28:52

こんな感じで。

<html>
<body>
<!-- パラメータに page=1 が入っているときだけ表示されるリンク -->
<a href="..." class="shy_link">aaaaaaaaaa</a>
<a href="..." class="shy_link">aaaaaaaaaa</a>
<a href="..." class="shy_link">aaaaaaaaaa</a>

<!-- 普通に表示されるリンク -->
<a href="...">bbbbbbbbbb</a>
<a href="...">bbbbbbbbbb</a>
<a href="...">bbbbbbbbbb</a>
</body>

<!-- ここから、追加する css と javascript -->
<style>
a.shy_link {
    display: none;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
    var mat = /page=(\d+)\b/.exec(location.search);
    if (mat && mat[1] == 1) {
        Array.from(document.querySelectorAll("a.shy_link")).forEach(function(a) {
            a.style.display = "inline";
        });
    }
});
</script>
</html>

page=1 のときにだけ表示しするリンクには、class="shy_link" を指定します。




追記です。

実はうまくいかないため設置の仕方がまちがえていないか いろいろチェックしなおしておりました

すみません。
javascript の部分を、以下のものに差し替えてください。

window.addEventListener("DOMContentLoaded", function() {
    var mat = /page=(\d+)\b/.exec(location.search);
    if (mat && mat[1] == 1) {
        Array.prototype.forEach.call(document.querySelectorAll("a.shy_link"), function(a) {
            a.style.display = "inline";
        });
    }
});

Array.from() が正式な仕様になっていないのを失念しておりました。

他1件のコメントを見る
id:a-kuma3

実はうまくいかないため設置の仕方がまちがえていないか いろいろチェックしなおしておりました

すみません。
Array.from() が正式な仕様になっていないのを失念しておりました。

回答に追記しましたので、確認をお願いします。

2016/05/27 08:06:40
id:pucca9x9

早々のお返事ありがとうございます
動作を確認いたしました
厚くお礼申しあげます

2016/05/27 08:24:05

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません