javascript - 如何使用自定义属性触发某个按钮

Question

我通过 url 获取变量。http://mysite.com/?category_id=1 我想使用 category-id 属性触发按钮：
<a class="cat-item" category-id="1" href="#">

我在 url 中获取参数没有问题。我唯一的问题是如何在加载网站后触发按钮。

谢谢您的帮助。

Answer 1

尝试使用这个：

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();
});

Answer 2

您可以通过如下属性查询来选择特定的锚标记。

$(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 选择器。我这样做是为了将搜索范围缩小到仅具有 id 'categoryMenu' 的容器，以防止 jQuery 搜索整个 DOM。这将使您在此选择器上获得更好的性能。

所以我的建议是......

将按钮放在包装 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>