Question

我正在尝试修改grid.js thumbnail system。我添加了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都会被“假”＆＃39;并执行类似下面的操作（if语句显然是相关位）。

这对我来说很好用：

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

使用JQuery在执行其他操作之前检查属性是否存在

1 个答案: