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

Question

I am working with a Jquery plugin and I would like to trigger the modal (div) by calling it's value instead of calling it's ID name. So if the attribute value is "554" meaning attrId="554" I will display the modal with the matching "554" attribute. Please keep in mind that the attribute value could be a variable.

My JSFiddle Code Example is here

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

Any help is appreciated. Thanks so much

Answer 1

You can use an attribute equals selector : [attribute="value"]

If your popup div has an attribute like this:

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

You can use the following:

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

jsfiddle

Answer 2

Ultimately it needs a unique selector unless you are okay with triggering multiple modals. One way to do it is to use the jQuery each function, and check each div for the matching attribute.

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