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

Question

我通过url获取变量。 http://mysite.com/?category_id=1 我想用一个类别的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>