Question

我通过网址获取变量。 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>

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

2 个答案: