javascript - カスタム属性を使用して特定のボタンをトリガーする方法

Question

URLから変数を取得しています。http://mysite.com/?category_id=1 category-id 属性を使用してボタンをトリガーしたい:
<a class="cat-item" category-id="1" href="#">

URLでパラメーターを取得するのに問題はありません。私の唯一の問題は、サイトを読み込んだ後にボタンをトリガーする方法です。

助けてくれてありがとう。

Answer 1

以下のように属性でクエリを実行することで、特定のアンカー タグを選択できます。

$(document).ready(function() {
    var button = $('a[category-id="' + your id from the url + '"]', '#categoryMenu');
    button.click(); //if your intention was to trigger the click event.
    button.trigger("some event name"); //if your intention was to trigger some other event.
});

ご覧のとおり、jQuery セレクターに 2 番目のパラメーターを渡します。jQuery が DOM 全体を検索するのを防ぐために、id 'categoryMenu' を持つコンテナーのみに検索を絞り込むためにこれを行います。これにより、このセレクターでのパフォーマンスが向上します。

だから私のアドバイスは....

ボタンをラッピング div に配置して、この手法を適用できるようにします

<div id="categoryMenu">
    <a class="cat-item" category-id="1" href="#">category 1</a>
    <a class="cat-item" category-id="2" href="#">category 2</a>
    <a class="cat-item" category-id="3" href="#">category 3</a>
    <a class="cat-item" category-id="4" href="#">category 4</a>
    <a class="cat-item" category-id="5" href="#">category 5</a>
</div>

Answer 2

これを使用してみてください：

function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

$(document).ready(function() {
    var catVal = getUrlVars()["category_id"];
    $('a[category-id="' + catVal +'"]').click();
});