如何使用Jquery通过它的属性值显示DIV

Question

我正在使用Jquery插件，我想通过调用它的值而不是调用它的ID名来触发模态（div）。 因此，如果属性值为“554”，意味着attrId =“554”，我将显示具有匹配“554”属性的模态。 请记住，属性值可以是变量。

我的JSFiddle代码示例在这里

;(function($) {

     // DOM Ready
    $(function() {

        // Binding a click event
        // From jQuery v.1.7.0 use .on() instead of .bind()
        $('#my-button').bind('click', function(e) {

            // Prevents the default action to be triggered. 
            e.preventDefault();

            // Triggering bPopup when click event is fired
            $('#element_to_pop_up').bPopup();

        });

    });

})(jQuery);

任何帮助表示赞赏。 非常感谢

Answer 1

您可以使用等于选择器的属性 ： [attribute="value"]

如果你的popup div有这样的属性：

<div id="element_to_pop_up" attrId="554">
    <a class="b-close">x</a>
    Content of popup
</div>

您可以使用以下内容：

var x = '554';
$('div[attrId="' + x + '"]').bPopup();

的jsfiddle

Answer 2

最终它需要一个独特的选择器，除非您可以触发多个模态。 一种方法是使用jQuery的每个函数，并检查每个div的匹配属性。

$( "div" ).each(function() {
    var criteria = 'example_criteria';
    if ($( this ).attr( "attributename" ) == criteria)
    {
         $(this).bPopup();
    }
});