使用JQuery在執行其他操作之前檢查屬性是否存在

Question

我正在嘗試修改grid.js縮略圖系統 。 我向原始版本添加了另外4個鏈接，以便可以向教程中已經存在的“網站”添加Facebook，Twitter，LinkedIn和“其他”按鈕：

 <li>
 <h4 class="date">4-10 Jan</h4>
 <img src="..." class="..." alt="..." />
 <h4>some text</h4>
 <a id="1" href="websiteurlhere" data-largesrc="imageurlhere" data-title="texthere" data-n2="facebookhere" data-n3="twitterhere" data-n4="linkedinhere" data-n5="ohterlinkhere"><img src="plussign.png" alt="img01"/></a> 
 </li> 

這是grid.js中更改的代碼

Preview.prototype = {
    create : function() {
        // create Preview structure:
        this.$title = $( '<h3></h3>' );
        this.$description = $( '<p></p>' );
        this.$href = $( '<a href="#">Visit website</a>&nbsp;' );
        this.$spacer = ( '&nbsp;&nbsp;' );
        this.$face = $( '<a href="#">Facebook</a>');
        this.$twitter = $( '<a href="#">Twitter</a>');
        this.$linkedin = $( '<a href="#">LinkedIn</a>');
        this.$other = $( '<a href="#">Other Link</a>');
        this.$details = $( '<div class="og-details"></div>' ).append( this.$title, this.$description, this.$href, this.$spacer, this.$face, this.$spacer, this.$twitter, this.$spacer, this.$linkedin, this.$spacer, this.$other );

        this.$loading = $( '<div class="og-loading"></div>' );
        this.$fullimage = $( '<div class="og-fullimg"></div>' ).append( this.$loading );
        this.$closePreview = $( '<span class="og-close"></span>' );
        this.$previewInner = $( '<div class="og-expander-inner"></div>' ).append( this.$closePreview, this.$fullimage, this.$details );
        this.$previewEl = $( '<div class="og-expander"></div>' ).append( this.$previewInner );
        // append preview element to the item
        this.$item.append( this.getEl() );
        // set the transitions for the preview and the item
        if( support ) {
            this.setTransition();
        }
    },
    update : function( $item ) {

        if( $item ) {
            this.$item = $item;
        }

        // if already expanded remove class "og-expanded" from current item and add it to new item
        if( current !== -1 ) {
            var $currentItem = $items.eq( current );
            $currentItem.removeClass( 'og-expanded' );
            this.$item.addClass( 'og-expanded' );
            // position the preview correctly
            this.positionPreview();
        }

        // update current value
        current = this.$item.index();

        // update preview´s content
        var $itemEl = this.$item.children( 'a' ),
            eldata = {
                href : $itemEl.attr( 'href' ),
                largesrc : $itemEl.data( 'largesrc' ),
                title : $itemEl.data( 'title' ),
                face : $itemEl.data('n2'),
                twitter : $itemEl.data('n3'),
                linkedin : $itemEl.data('n4'),
                other : $itemEl.data('n5'),
                description : $itemEl.data( 'description' )
            };

        this.$title.html( eldata.title );
        this.$description.html( eldata.description );
        this.$href.attr( 'href', eldata.href );
            this.$face.attr( 'href', eldata.face );
            this.$twitter.attr( 'href', eldata.twitter );
            this.$linkedin.attr( 'href', eldata.linkedin );
            this.$other.attr( 'href', eldata.other );

現在。 我使用PHP創建列表，因此每個特定記錄中可能有也可能沒有所有鏈接。 因此，我想檢查代碼所處理的“ a”內部是否確實存在“ data-n2”，“ data-n3”，“ data-n4”，“ data-n5”。 如果沒有，則不要在預覽中添加任何內容。

我想在第一部分的create Preview strucure中添加一個if。 我嘗試了在stackoverflow上可以找到的每個系統。 我試過了：

• if ($itemEl.data('n3') != "")
• if ($node->hasAttribute('data-n3'))
• if (this.hasAttribute("data-n3"))
• if ($element.is("[data-n3]"))
• if ($(element).attr('data-n3'))
• if (this.$item.children( 'a' ).data('3'))

可能還有我什至不記得的其他人。 沒用。 它使代碼失效（結果是“加號”圖標直接指向href而不是解釋網格預覽代碼）。

我能做什么？ 有什么想法嗎？

Answer 1

如果我對您的理解正確，那么您想檢查屬性是否存在以及每個data-n1-data-n3屬性中是否都有值？ 我可能會使用這樣的事實：一個空字符串，null和undefined都將是'falsey'，並執行以下操作（if語句顯然是相關的位）。

這對我來說很好：

var test = false;
if ($itemEl.data('n3')) test = true;
alert(test);